父容器设 position: relative 是绝对定位子元素锚定其滚动的必要前提；子元素用 position: absolute 后，top/left 相对于父容器 padding box 计算，随父容器滚动而视觉同步，但需确保父容器有高度、overflow 且无干扰定位的中间祖先。
父容器加 position: relative 是必要但不充分条件
只给父容器设 position: relative，子元素用 position: absolute，只能让它相对于父容器定位，**不会随父容器滚动而“粘住”**。这时候子元素的定位基准是父容器的 border box，但一旦父容器自身可滚动（比如有 overflow: auto），子元素默认仍留在文档流原位，不会跟着父容器的内容一起动。
真正想实现“随父容器滚动”的定位，本质是脱离文档流 + 定位锚点固定
关键不是“让子元素跟着滚”，而是：子元素用 position: absolute 脱离文档流，其 top/left 等值始终相对于最近的「已定位祖先」（即 position 为 relative、absolute、fixed 或 sticky 的祖先）计算。只要这个祖先就是那个会滚动的父容器，且它本身设置了 position: relative，那么子元素就会“钉”在父容器坐标系里的某个位置，**随父容器内容滚动而自然呈现为“一起动”**。
- 父容器必须有明确高度或限制（否则
relative无实际定位上下文意义） - 父容器需设置
overflow: auto或scroll才能滚动 - 子元素的
top/left值是相对于父容器 padding box 的左上角，不是 content box - 如果父容器没有
position，浏览器会继续向上找，最终可能锚定到，那就完全不随父容器动了
常见错误：滚动时子元素“飞走”或位置错乱
典型现象是：父容器一滚动，子元素突然跳到页面顶部/左侧，或固定在视口某处不动。这基本说明：
- 父容器漏写了
position: relative，导致子元素锚定到了更外层容器甚至 - 父容器用了
position: sticky但没配top，它本身行为不稳定，不适合作为 absolute 的定位上下文 - 子元素设置了
position: fixed—— 这会让它锚定视口，和父容器滚动完全无关 - 父容器有 transform（如
scale、translateZ），会创建新的 containing block，但同时也可能干扰滚动行为或触发硬件加速异常
.scroll-container {
position: relative;
height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
}
.scroll-container .badge {
position: absolute;
top: 8px;
right: 8px;
background: #007bff;
color: white;
padding: 4px 8px;
border-radius: 3px;
font-size: 12px;
}
上面这段代码里，.badge 会始终显示在 .scroll-container 右上角内边距区域，父容器滚动时，它位置不变（因为是绝对定位），但视觉上就是“随容器一起存在”——这才是你想要的效果。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的一点：父容器的 position: relative 必须在 DOM 结构上是 **最近的已定位祖先**；如果中间插了一个 position: absolute 的兄弟 wrapper，那子元素就可能被它截获，而不是锚定到滚动容器本身。
