絕對定位的元素是滾動的內容，爲什麼？

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中的最後一個示例。