绝对定位元素在滚动容器中定位异常，是因为滚动容器未设position（如relative），导致其不构成定位上下文；应为滚动容器添加position: relative以确立定位基准。
当使用 position: absolute 的元素在滚动容器中表现异常（比如随滚动偏移、定位不准、脱离预期位置），核心原因往往是：该滚动容器**不是**绝对定位元素的“定位上下文”（containing block）。
确认滚动容器是否为定位上下文
绝对定位元素的偏移（top/left 等）是相对于其**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）计算的。如果滚动容器本身没有设置这些值，它就不是定位上下文，绝对定位元素会继续向上查找，最终可能相对于 body 或视口定位——这就会导致滚动时位置“飘走”。
常见错误场景与验证方法
检查以下几点：
- 打开浏览器开发者工具（F12），选中你的滚动容器（如
div.scroll-wrapper），查看Computed面板中的position值是否为static（默认值）——如果是，它就不构成定位上下文； - 再选中你的绝对定位子元素，看它的
Containing Block是谁（可在 Styles 或 Layout 面板中观察偏移参考基准）； - 若滚动容器只是设置了
overflow-y: auto或scrollbar-gutter等滚动相关属性，但未设position，那它对内部absolute元素无定位约束力。
修复方案：主动创建定位上下文
只需给滚动容器加上 position: relative（最常用且副作用最小）：
立即学习“前端免费学习笔记（深入）”；
position: relative;
overflow-y: auto;
height: 300px;
}
这样，其内部所有 position: absolute 子元素就会以它为基准进行定位，滚动时位置保持稳定。
其他可选方式（按需使用）：
-
position: sticky：适合需要粘性行为的滚动容器（如固定表头）； -
position: absolute或fixed：仅在明确需要脱离文档流时使用，注意可能影响布局流； - 避免用
transform单独触发新层叠上下文却不设position——它不会创建定位上下文，不能解决此问题。
补充提醒：z-index 与层叠上下文
加了 position: relative 后，若还遇到遮挡问题，记得检查 z-index 是否生效——只有已定位元素才支持 z-index。同时注意：父容器若建立了新的层叠上下文（如含 opacity 、filter、will-change 等），其内部 z-index 将在该上下文中独立计算，可能造成意外层级关系。
