绝对定位元素在多列容器中“飞走”是规范行为，因column-count不创建定位上下文，需显式设position: relative；若仍错位，须排查transform/filter干扰；钉住文字旁应改用column-span: all+直接子元素方案。
绝对定位元素在 columns 容器里“飞走”或错位，不是 bug，是规范行为——多列容器默认不构成定位上下文，position: absolute 元素会直接锚定到 body 或更外层已定位祖先。
为什么加了 column-count 但 position: absolute 还是相对 body 定位
因为 column-count、column-width 等多列属性本身**不会创建新的包含块（containing block）**。只要父容器没显式设置 position: relative、absolute、fixed 或 sticky，所有 absolute 子元素就跳过它，向上回溯。
- 用开发者工具选中该元素，在「Computed」面板看
Containing block是谁；若显示为body或html，就证实了这点 -
float、display: flex、display: grid都不能替代position: relative来建立定位上下文 - 即使容器有
padding或border，也不影响这个规则——定位上下文只认position值，不认盒模型
加了 position: relative 却还是错位？检查 transform 和 filter
一旦父链中某层元素带了 transform、filter 或 will-change，它就会**强制创建新的包含块**，导致 absolute 元素绕过你刚加的 relative 父级，去认那个带 transform 的祖先。
- 逐级检查父元素的 Styles 面板，重点搜
transform:、filter:、will-change: - 临时删掉疑似样式，观察「Containing block」是否回归预期容器
- 如果必须保留
transform，就把position: relative加在那个带transform的元素上，而不是它的父级
想让图标/标注“钉”在某段文字旁？别硬调 top/left
靠 top 和 left 把 absolute 元素“塞”进某一列是徒劳的：列内容随字体、断行、缩放动态重排，而 absolute 元素位置固定不变，滚动或窗口缩放时立刻脱节。
立即学习“前端免费学习笔记（深入）”；
- 把目标元素（如
<aside>或图标<div class="note">）作为多列容器的**直接子元素** - 给它设
column-span: all（确保它 display 是块级，且没被嵌套） - 配合
width（比如width: 180px）和position: absolute，同时确保其父容器已有position: relative - 避免对
column-span: all元素再设top/left—— 它已脱离列流，坐标基准不可控
column-span: all 不生效？先确认三个硬条件
column-span: all 是个“全有或全无”的开关，缺一不可：
- 父容器必须启用多列：明确写了
column-count、column-width或columns - 目标元素必须是多列容器的**直接子元素**（不能包在
<div class="wrapper">里） - 目标元素的
display必须是块级（block、flex、grid可以，inline或inline-block不行） - 用开发者工具检查 Computed 样式里的
column-span是否真的显示为all；若仍是1或none，说明没命中任一条件
真正容易被忽略的是：column-span: all 元素不再参与列高平衡计算，但它会撑高整个容器高度——如果带背景或阴影，又没做 z-index 层叠隔离，很可能遮挡或截断下面的列内容。
