绝对定位元素（position: absolute）的参照系是其最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的父级），而非视口；当该祖先元素设置 overflow: scroll 时，滚动会带动其内部所有子元素（包括绝对定位元素）一同位移。
css 中绝对定位元素（position: absolute）的参照系是其最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的父级），而非视口；当该祖先元素设置 overflow: scroll 时，滚动会带动其内部所有子元素（包括绝对定位元素）一同位移。
在你的示例中，.child2 虽然使用了 position: absolute，但它并非“脱离文档流后固定于视口”，而是相对于其最近的已定位祖先——即 #overflowTest（设置了 position: relative）进行定位。因此，.child2 的 top: 0; left: 0 指的是紧贴 #overflowTest 的内容区左上角（content box），而 #overflowTest 启用了 overflow: scroll，其内部滚动的是内容区域（content area）。当 .child1 高度远超容器导致出现滚动条并发生滚动时，整个内容区域（包括 .child2 所依附的定位上下文）随之位移——于是 .child2 也跟着“被滚动”了。
这并非 bug，而是 CSS 定位规范的明确行为：absolute 元素的偏移基准点（containing block）由最近的已定位祖先决定，而该祖先的内容滚动会直接影响其 containing block 的可视范围。
✅ 正确解决方案（按适用场景选择）
1. 改变定位上下文：将 position: relative 上移至更高层级（如 body）
body {
position: relative; /* 创建新的 containing block */
}
#overflowTest {
/* 移除 position: relative */
color: white;
padding: 15px;
width: 50%;
height: 100px;
overflow: scroll;
border: 1px solid #ccc;
background: green;
}
.child2 {
position: absolute;
top: 0; /* 相对于 body 顶部 */
left: 0; /* 相对于 body 左侧 */
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.5);
}
⚠️ 注意：此时 .child2 将脱离 #overflowTest 的布局边界，可能覆盖其他页面内容，需谨慎控制 z-index 和尺寸。
2. 使用 position: fixed（推荐用于真正“固定”的覆盖层）
.child2 {
position: fixed; /* 相对于视口定位 */
top: 15px; /* 距离视口顶部 15px（需手动计算 offset） */
left: 25%; /* 需结合 #overflowTest 的位置动态调整 */
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
}
✅ 优势：完全不受任何父级滚动影响，始终锚定视口。
⚠️ 注意：fixed 元素脱离文档流，且 top/left 值基于视口，若需精确对齐 #overflowTest 内部某位置，需通过 JavaScript 动态计算其视口坐标（例如 getBoundingClientRect()）。
3. 使用 position: sticky（适用于“吸附式”跟随）
.child2 {
position: sticky;
top: 0; /* 在 #overflowTest 内滚动时吸附到顶部 */
width: 100%;
height: 40px;
background: rgba(0, 0, 0, 0.5);
}
✅ 适用场景：希望元素在容器内滚动时“粘住”顶部/底部，超出容器范围后正常滚动出视野。
? 关键总结
- position: absolute ≠ “固定不动”，它只代表脱离普通文档流，但依然受其 containing block（最近已定位祖先）的约束；
- overflow: scroll 滚动的是 content area，而 absolute 子元素的定位参考点就在该区域内；
- 若需真正“不随父滚动”，优先考虑 fixed（视口级）或重构定位上下文（提升 relative 祖先层级）；
- 开发中建议使用浏览器开发者工具的 Layout Inspector 查看元素的 containing block 边界，直观验证定位逻辑。
掌握这一机制，能有效避免模态框遮罩层、悬浮按钮、表头冻结等常见交互组件的定位异常问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
