绝对定位元素在多列容器中错位是规范行为：其包含块回溯到最近块级容器，需显式设position: relative并确保有高度；sticky在多列中无效，应改用absolute+relative+JS动态计算。
绝对定位元素在 multi-column 容器里“消失”或错位
这不是 bug，是规范行为：position: absolute 元素的包含块（containing block）会回溯到最近的「块级容器」，而 columns 容器本身不构成新的定位上下文。结果就是：元素脱离当前列，跑到第一列左上角，甚至被裁剪不可见。
必须显式给多列容器加 position: relative，才能让它成为子元素的包含块。否则，top/left 等偏移值全按视口算，完全失控。
- 错误写法：
.columns { column-count: 3; }→ 子元素position: absolute无参考点 - 正确写法：
.columns { column-count: 3; position: relative; } - 注意：只设
position: relative不够，还得确保该容器有明确高度或内容撑开，否则某些浏览器可能仍无法稳定计算包含块
想让绝对定位元素“钉”在某一段文字旁，但 top/left 硬调总不准
因为多列是动态分段的，同一段文字在不同屏幕宽度下可能落在第 1 列或第 2 列，用固定 top 值会错位。不能靠猜位置，得靠结构控制。
- 把目标元素和它要标注的文本包进同一个子容器，再对该子容器设
position: relative - 对标注元素设
position: absolute，此时它的top/left是相对于这个局部容器，而非整列 - 若需跨列居中（如标题横跨三列），改用
column-span: all+ 单独一层，再配position: relative和宽高约束 - 避免在
column-span: all元素内部再嵌套position: absolute，容易触发渲染异常
position: sticky 在多列中基本无效
截至 2026 年 9 月，所有主流浏览器都不支持 position: sticky 在 column-count 或 column-width 容器内触发粘性行为。它只会相对于整个多列容器做计算，而不是某一列内部。
- 现象：
sticky元素滚动时“卡住”在容器顶部，但列内容继续流动，造成视觉断裂 - 替代方案：老实用
position: absolute+position: relative父容器，配合 JS 监听 scroll 和 column 的实际 offsetTop（需用getBoundingClientRect()动态读取） - 如果只是想让某段说明文字随当前列滚动，优先考虑用普通流 +
break-inside: avoid保段落完整，比强行 sticky 更可靠
多列 + 绝对定位 + flex/grid 嵌套时布局崩了
columns 是内容流重分发机制，它不改变子元素的 display 类型，但会打断 flex/grid 的布局上下文。常见表现：卡片被撕裂、高度塌陷、margin 错乱。
- 别把
display: flex的直接子元素放进column-count: 3容器里；应让多列只作用于纯文本流，卡片类区块用column-span: all提出来 - 对不想被拆分的元素，加
break-inside: avoid（Firefox 需回退page-break-inside: avoid，IE 不支持） -
column-gap会参与盒模型计算：它不是 margin，不被box-sizing: border-box拦截，会导致总宽度溢出；若容器有padding，gap 会额外叠加，最后一列常被挤窄
真正麻烦的从来不是加几行 position: absolute，而是它和 columns 叠加后引发的连锁反应：包含块失效、滚动错位、打印样式错乱、焦点顺序异常——这些在开发阶段往往看不出来，上线后才集中爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
