absolute元素随父容器滚动是CSS规范行为，因其定位基准为最近非static定位祖先；若该祖先设overflow:scroll/auto，则滚动时containing block可视范围移动，导致absolute元素跟随移动。
为什么 absolute 元素会跟着父容器滚动
这不是 bug，是 CSS 规范明确的行为：position: absolute 的定位基准（containing block）是最近的非 static 定位祖先。如果这个祖先设置了 overflow: scroll 或 auto，那么它的内容区滚动时，整个 containing block 的可视范围就移动了——absolute 元素自然跟着“动”。
常见现象：弹窗、下拉菜单、日期控件图标在可滚动区域里一滚动就消失或错位；DevTools 里看到元素 top: 0 却飘到视口中间。
- 检查该
absolute元素的offsetParent（Computed 面板里找），确认它是不是你预期的那个父容器 - 如果
offsetParent是#overflowTest这类有overflow的容器，那它“跟滚”就是必然结果 - 特别注意：表格单元格（
<td>）、Flex 容器子项、自动修正后的 DOM 结构，都可能让本该是定位锚点的父级“失效”
怎么把定位锚点抬升到不滚动的层级
最直接的办法是让 absolute 元素换一个更靠上的定位上下文，避开滚动容器的影响。
- 把
position: relative从滚动容器上移走，加到更高层（比如<body>或某个固定高度的 wrapper） - 确保这个新锚点本身没有
overflow，也不在任何transform或clip-path容器内（否则可能触发新的 containing block） - 改完后，
top/left值要重新计算——现在是相对于新锚点，不是原父容器 - 加
z-index控制层叠，避免被其他内容遮挡；必要时用contain: layout防止重排扩散
不想改结构？试试 fixed + JS 动态同步
当无法调整 HTML 层级或 CSS 锚点时，用 position: fixed 替代 absolute，再用 JS 把它“钉”在视觉上原位置——适合弹窗、Tooltip 等需要脱离滚动影响的场景。
立即学习“前端免费学习笔记（深入）”；
- 先用
element.getBoundingClientRect()获取元素当前视口坐标（不是offsetTop！后者依赖 offsetParent） - 监听滚动事件，在
fixed元素上设style.left和style.top为上述坐标 - 注意节流（
requestAnimationFrame比debounce更稳），否则滚动卡顿 - 滚动停止后，若需恢复
absolute，得手动还原样式并清除监听器
容易被忽略的兼容性陷阱
移动端 Safari 和旧版 Chrome 对 containing block 的判定更严格，尤其遇到 transform、will-change 或 overflow: hidden 的父级时，absolute 可能意外被截断或偏移。
- 不要在滚动容器上同时设
transform: translateZ(0)和overflow: scroll——这会让某些浏览器把 containing block 切换为 transform 容器 -
fixed元素在 iOS 上可能随键盘弹出而错位，加viewportmeta 的height=device-height不够，得监听resize补正 - 嵌套表格中，
<td>默认不是定位上下文，想让它当锚点必须显式加position: relative，且不能有display: table-cell冲突
真正卡住人的往往不是“怎么写”，而是 DevTools 里看到的 DOM 结构和你写的 HTML 不一样——先看 Elements 面板里的真实树，再调样式。
