根本原因是多列容器不创建定位上下文，导致绝对/固定定位元素回溯到body；必须给多列容器显式设置position: relative才能修复，且仅对直接子元素生效。
定位元素在多列中“消失”或错位的根本原因
不是样式写错了，而是 position: absolute 或 position: fixed 元素在多列容器里默认找不到正确的包含块（containing block）。多列容器本身不创建新的定位上下文，浏览器会回溯到最近的块级祖先（通常是 ），导致元素被吸到第一列顶部、z-index 失效、滚动时位置错乱。
必须给多列容器加 position: relative
这是最直接有效的修复动作，否则其他操作基本无效：
-
.columns { column-count: 3; position: relative; }—— 必须显式设置，不能依赖默认值 - 只对直接子元素生效：绝对定位子元素（如
.tooltip、.badge）的定位参考点才会变成这个容器 - 如果子元素本身是
display: flex或display: grid，它内部的绝对定位仍会向上回溯，需在该子元素上也加position: relative
break-inside: avoid 对定位元素无效，别乱加
这个属性只作用于文档流中的块级盒，而 position: absolute 和 position: fixed 已脱离文档流。加了也没用，还会干扰调试判断：
-
absolute元素不会被分栏逻辑切割，所以不存在“断裂”，只有“错位” - 如果发现定位元素被劈开，实际是它所在的父容器（比如一个
.card）被跨列切了——这时该加break-inside: avoid的是那个父容器，不是absolute子元素本身 -
sticky在多列中基本不可用，规范不支持列内粘性定位，强行使用会退化为static
小屏和 Safari 下的额外注意点
移动端和旧版 Safari（≤15.6）对多列+定位组合的支持更脆弱，需叠加防护：
- 小屏媒体查询中，优先设
column-count: 1，避免列数强制导致定位锚点偏移 - Safari 中若
position: relative仍不生效，尝试加transform: translateZ(0)强制触发层叠上下文 - 避免在多列容器上同时用
overflow: hidden和position: relative，某些 WebView 会触发渲染 bug，改用overflow: visible或包裹一层再裁剪
真正容易被忽略的是：定位元素的尺寸和坐标值（top/left）是相对于整个多列容器计算的，不是某一列。想让它“钉在某段文字旁”，得靠 JS 测量列内位置，纯 CSS 无解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
