Warum scheint „position: relative' die Stapelreihenfolge wie „z-index' zu beeinflussen?

Warum Ihr Code ein Z-Index-ähnliches Verhalten zeigt

In Ihrem Markup hat das .container-Element die Position: relative, was Ihnen aufgefallen ist ahmt scheinbar den Effekt von Z-Index nach. Dieses Verhalten ergibt sich aus der CSS-Malreihenfolge.

Malreihenfolge und Positionierung

Die CSS-Spezifikation bestimmt die Reihenfolge, in der Ebenen auf dem Bildschirm gemalt werden. Ohne position: relative ist Ihr .container-Element „in-flow“ und wird in Schritt 4 der Malreihenfolge gemalt.

Umgekehrt wird das .container-Element „positioniert“ und fällt darunter, wenn Sie position: relative hinzufügen Schritt 8 der Malreihenfolge.

Baumauftragsmalerei

In jedem Malschritt Elemente sind in „Baumreihenfolge“ bemalt. In Ihrem Fall sind sowohl die .container- als auch die .mask-Elemente positionierte Elemente. Da keines von beiden über einen expliziten Z-Index-Wert verfügt, bestimmt die Baumreihenfolge, welches oben gemalt wird.

Elemente neu anordnen

In Ihrem anfänglichen Markup das .mask-Element erscheint nach dem .container in der Hierarchie. Wenn also beide Elemente positioniert sind, wird die .mask als letztes gezeichnet und deckt den .container ab.

Wenn Sie die Elemente jedoch neu anordnen, sodass .container nach .mask steht, werden beide Elemente in Schritt 8 gezeichnet , immer noch in der Baumreihenfolge. In diesem Szenario wird .container zuletzt gezeichnet, wodurch das zuvor beobachtete „Z-Index-Verhalten“ entfernt wird.

Das obige ist der detaillierte Inhalt vonWarum scheint „position: relative' die Stapelreihenfolge wie „z-index' zu beeinflussen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!