Question

我有following setup:（尝试滚动内容）

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

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

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

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

1 个答案: