为何父元素滚动时，absolute定位的child2元素无法保持预期位置？

问题场景 #

父容器#overflowTest设置了position: relative和overflow: scroll，内部包含高滚动内容child1与绝对定位遮罩child2。预期滚动容器时仅child1移动，child2固定在容器视口内，但实际child2会随滚动内容一同偏移。

核心原理 #

你的理解误区在于：绝对定位的参考对象是容器的「布局盒」，而非滚动视口。

当容器设置position: relative时，绝对定位子元素的定位锚点是容器的padding box左上角（即内容区域的初始起始位置）。容器滚动时，滚动的是内部的内容区域——内容区域会相对于容器视口发生偏移，但绝对定位元素的锚点绑定的是内容区域的原始位置，而非当前可见的视口位置。因此内容滚动时，child2会跟着内容的原始锚点移动，最终被带出视口。

简单来说：child2的top:0;left:0绑定的是内容区域的起点，不是容器窗口的起点，内容滚走了，它也跟着走。

解决办法（让child2固定在容器视口） #

要让child2固定在容器的可见视口内，需将滚动内容与固定元素的定位参考分离：

1. 调整HTML结构，把滚动内容放入独立容器：

<div id="overflowTest">
  <div class="scroll-content">
    <div class="child1"></div>
  </div>
  <div class="child2"></div>
</div>

2. 修改CSS，让父容器负责定位，内部容器处理滚动：

#overflowTest {
  color: white;
  padding: 15px;
  width: 50%;
  height: 100px;
  border: 1px solid #ccc;
  position: relative;
  background: green;
  overflow: hidden; /* 隐藏父容器溢出，由内部容器处理滚动 */
}
.scroll-content {
  height: 100%;
  width: 100%;
  overflow: scroll; /* 内部容器负责滚动逻辑 */
}
.child1{
  height: 800px;
  width: 10px;
  background: red;
}
.child2{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  pointer-events: none; /* 可选：让遮罩不阻挡下层内容的点击事件 */
}

调整后，child2的定位锚点变为父容器的视口左上角，滚动仅发生在内部的scroll-content中，child2就能固定在容器的可见区域内。

内容的提问来源于stack exchange，提问作者sql_dummy