绝对定位元素（position: absolute）会相对于最近的已定位祖先（即 position 为 relative/absolute/fixed/sticky 的祖先）进行定位；当该祖先启用滚动（overflow: scroll）时，子元素虽“视觉上”被卷入视口，实则仍锚定在祖先盒内——因此会随滚动而位移。
绝对定位元素（position: absolute）会相对于最近的已定位祖先（即 position 为 relative、absolute、fixed 或 sticky 的祖先）进行定位；当该祖先启用滚动（overflow: scroll）时，子元素虽“视觉上”被卷入视口，实则仍锚定在祖先盒内——因此会随滚动而位移。
在你的示例中，.child2 设置了 position: absolute，而其父容器 #overflowTest 恰好拥有 position: relative ——这使 .child2 的定位上下文（containing block）被锁定在 #overflowTest 内部。尽管 .child2 的 top: 0; left: 0 指向父容器内容区的左上角，但该“左上角”是内容区域的逻辑起点，而非视口固定点。一旦父容器因 overflow: scroll 发生内容滚动，整个内容流（包括 .child1 和 .child2 所处的定位上下文边界）都会位移，导致 .child2 在视觉上随之“移动”。
✅ 正确解决方案
方案一：更改定位上下文（推荐用于局部固定）
将 position: relative 从滚动容器移至更高层级（如 <body>），使 .child2 相对于视口根容器定位：
body {
position: relative; /* 创建新的定位上下文 */
}
#overflowTest {
/* 移除 position: relative */
color: white;
padding: 15px;
width: 50%;
height: 100px;
overflow: scroll;
border: 1px solid #ccc;
background: green;
}
.child1 {
height: 800px;
width: 10px;
background: red;
}
.child2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}⚠️ 注意：此时 .child2 将相对于 <body> 定位，若页面整体滚动，它仍会移动。仅适用于父容器独立滚动、且无需响应页面级滚动的场景。
方案二：使用 position: fixed（真正视口固定）
若需元素始终停留在屏幕指定位置（无视所有滚动），应改用 fixed：
.child2 {
position: fixed;
top: 15px; /* 相对于视口顶部 */
left: 50%; /* 配合 transform 实现水平居中 */
transform: translateX(-50%);
width: 200px;
height: 40px;
background: rgba(0, 0, 0, 0.7);
color: white;
display: flex;
align-items: center;
justify-content: center;
}✅ 优势：完全脱离文档流，不随任何容器或页面滚动而偏移。
⚠️ 注意：fixed 元素脱离普通布局流，可能影响其他元素排版；且在移动端需注意 viewport 缩放兼容性。
方案三：position: sticky（条件性吸附）
适合需要“滚动到某位置后吸附”的交互场景（如表头、导航栏）：
.child2 {
position: -webkit-sticky; /* Safari 兼容 */
position: sticky;
top: 0; /* 到达视口顶部时吸附 */
background: rgba(0, 0, 0, 0.5);
height: 30px;
}? 前提：父容器必须有高度且允许内容溢出（如 overflow: visible），且 sticky 元素不能是 overflow: hidden/auto/scroll 容器的直接子元素（否则失效）。
? 关键总结
- absolute ≠ “固定在屏幕上”，而是“固定在定位上下文中”；
- 定位上下文由最近的 已定位祖先（非 static）决定；
- 滚动容器本身若为定位上下文，则其内部 absolute 元素必然随滚动位移；
- fixed 锚定视口，sticky 提供滚动触发式吸附，二者才是实现“不随动”的语义化选择。
选择方案前，请明确需求本质：是「相对于某个容器静止」？还是「相对于屏幕静止」？抑或「滚动中动态吸附」？精准匹配定位策略，才能避免视觉错位与调试困扰。
