絶対配置された要素はコンテンツでスクロールされますが、なぜですか？

Question

は、私は（コンテンツをスクロールしてみてください）

HTML following setup:を持って

<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の最後の例を参照してください。