绝对定位元素滚动内容，为什么？

Question

我有以下设置:(尝试滚动内容）

HTML

<div class="wrapper">
  <div class="backdrop"></div>
  <div class="content">
    1<br>
    2<br>
    3<br>
    4<br>
    5<br>
    6<br>
    7<br>
  </div>
</div>

CSS：

.wrapper {
  height: 100px;
  overflow: auto;
  border: 1px solid black;
  position: relative;
}

.backdrop {
  position: absolute;
  top:0;
  left: 0;
  bottom:0;
  right: 0;
  background: red;
}

问题是由于某种原因，背景与内容一起滚动。 为什么会这样？ 我期待背景保持静止，因为它相对于包装边框定位，而不是内容。

Answer 1

可滚动区域由包装器通过其overflow: auto声明定义。 由于包装器用作内容和背景的包含块（由于position: relative ），因此这会导致两个元素一起滚动。 换句话说，这是由于这两个 overflow: auto和position: relative相同的父元素，协同工作。

请注意，绝对定位不会使元素免于滚动; 当一个absposed元素看起来不会滚动时，这只是因为它的包含块不会滚动，而且与absposed元素滚动的是一些不是其包含块的其他元素。 在您的设置中不是这种情况。 有关此示例的另一个示例，请参阅规范的第11.1.1节中的最后一个示例。