Absolut positioniertes Element wird mit Inhalt gescrollt, warum?

Question

Ich habe die following setup: (versuchen, den Inhalt scrollen)

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; 
} 

Das Problem ist, dass Kulisse aus irgendeinem Grunde oben mit dem Inhalt gescrollt wird. Warum passiert dies? Ich hatte erwartet, dass der Hintergrund still bleibt, da er relativ zu den Deckblättern positioniert ist und nicht der Inhalt.

Answer 1

Der scrollbare Bereich wird vom Wrapper über seine Deklaration overflow: auto definiert. Da der Wrapper sowohl als Inhalt für den Inhalt als auch für den Hintergrund dient (aufgrund von position: relative), führt dies dazu, dass beide Elemente zusammen scrollen. Mit anderen Worten, dies liegt an sowohloverflow: auto und position: relative auf dem gleichen Elternelement, arbeiten im Tandem.

Beachten Sie, dass absolute Positionierung ein Element nicht immun gegen Scrollen macht; Wenn ein abspeicherndes Element nicht zu scrollen scheint, liegt das einfach daran, dass sein umgebender Block nicht scrollt, und was auch immer vom abliegenden Element weggescrollt wird, ist ein anderes Element, das seinen umgebenden Block enthält. Dies ist in Ihrem Setup nicht der Fall. Ein anderes Beispiel hierzu finden Sie im letzten Beispiel in section 11.1.1 of the spec.