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

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

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

请注意，绝对定位不会使元素免于滚动;当一个绝对元素看起来不滚动时，这仅仅是因为它的包含块不滚动，并且除了从被删除元素滚动以外的其他元素是其它元素，而不是其包含块的。在您的设置中情况并非如此。有关这方面的另一个示例，请参见section 11.1.1 of the spec中的最后一个示例。