绝对定位元素随父容器滚动是css规范行为：其定位上下文为最近已定位祖先，若该祖先设overflow:scroll/auto，则滚动时整个包含块可视区域位移，导致元素跟随移动。
绝对定位元素随父容器滚动，不是 bug，是 CSS 规范的明确行为：它的定位上下文（containing block）就是最近的已定位祖先，而该祖先一旦设置了 overflow: scroll 或 overflow: auto，其内容滚动就会带动整个 containing block 的可视区域位移——.child2 当然跟着动。
为什么 position: absolute 元素会跟着父容器滚动？
关键在定位上下文被“锁死”在滚动容器内部。比如父容器 #overflowTest 设了 position: relative 和 overflow: scroll，那它的 content area 就是 .child2 的参照系；滚动时，这个参照系本身在动，所以元素视觉上“被拖走了”。
-
top: 0; left: 0指的是紧贴该容器 content box 左上角，不是视口 - 即使
.child2是fixed风格需求（如悬浮按钮），只要它没脱离这个 containing block，就逃不掉滚动影响 - 用 Chrome DevTools 查看该元素的
offsetParent，大概率显示的就是那个带overflow的父级
让绝对定位元素“固定在视口”不随滚动：上移 position: relative
最直接有效的方式，是把定位锚点从滚动容器里“拔出来”，提到更高层、不滚动的容器上（通常是 body 或一个静态 wrapper）。
- 给
body加position: relative（注意：不要影响全局布局，body默认就是 static，加了也不会改变流内位置） - 移除滚动容器（如
#overflowTest）上的position: relative，让它回归 static -
.child2的top/left就变成相对于body计算，不再受内部滚动影响 - ⚠️ 注意：
.child2此时可能覆盖其他内容，需配z-index和明确尺寸，避免遮挡交互区域
需要“固定在滚动容器右下角”怎么办？
如果目标是类似“回到顶部”按钮那种——始终停在滚动容器的某个角落（而非视口），就不能靠上移 relative，得换思路：
- 保留滚动容器的
position: relative，但改用position: sticky替代absolute（仅适用于容器内边缘吸附场景） - 或用 JS 监听
scroll事件 +getBoundingClientRect()动态更新top/left，但开销大、有延迟，慎用 - 更现代的做法：用
display: grid或display: flex配合align-self: end+justify-self: end实现“容器内右下定位”，完全避开定位上下文依赖
容易忽略的兼容性与副作用
移动端尤其 iOS Safari 对 position: absolute + overflow: auto 组合的支持不稳定，老版本可能出现滚动卡顿或定位偏移。
- 临时方案：加
-webkit-overflow-scrolling: touch（虽已废弃，但部分存量环境仍需） - 别在滚动容器父级上滥用
transform或filter，它们会创建新 containing block，让top/left计算基准偏移 -
box-sizing: border-box不影响定位起点——top: 0始终从 padding box 开始算，父级的padding会吃掉你预期的偏移距离
真正难的不是加 position: relative，而是确认它加在哪一层、以及那一层是否真的“静止”。滚动容器里的绝对定位，本质上是在和 containing block 的生命周期做博弈——错位往往发生在你以为它“属于父容器”的时候，其实它早被祖父节点悄悄接管了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
