Wie wirkt sich „position:relative' auf den Z-Index und die Stapelreihenfolge der Elemente in CSS aus?

Warum das „position:relative“-Attribut das Z-Index-Verhalten verändert

In HTML und CSS wird die „position:relative“-Eigenschaft häufig zum Positionieren von Elementen verwendet in ihrem Behälter. In bestimmten Szenarien kann es jedoch so aussehen, als ob diese Eigenschaft auch Auswirkungen auf den Z-Index hat, auch wenn dies nicht explizit angegeben ist.

Um dieses Verhalten zu verstehen, ist es notwendig, sich mit der CSS-Malreihenfolge zu befassen. Gemäß der CSS-Spezifikation werden Elemente in der folgenden Reihenfolge gemalt:

1. Normaler Fluss: Elemente werden in der Reihenfolge gemalt, in der sie im HTML-Dokument erscheinen.
2. Floats: Floating-Elemente werden in Baumreihenfolge nach dem normalen Fluss gemalt.
3. Positioniert Elemente: Elemente mit anderen Positionswerten als „statisch“ werden in Baumreihenfolge nach Floats gezeichnet.
4. Nicht positionierte Blockelemente im Fluss: Diese Elemente werden in Baumreihenfolge gezeichnet nach positionierten Elementen.
5. Absolut positionierte Elemente: Elemente mit der Position „absolut“ werden nach dem normalen Fluss in Baumreihenfolge gezeichnet. Floats und positionierte Elemente.

Standardmäßig wird ein Element ohne explizite Positionsangabe (z. B. „position:static“ oder „position:absolute“) als „im Fluss“ betrachtet und wird es auch sein während Schritt 4 gemalt. Wenn dem übergeordneten Container dieses Elements jedoch „position:relative“ gegeben wird, wird es zu einem positionierten Element und wird während Schritt 3 gemalt.

Wenn im gegebenen Beispiel das Wenn das „.container“-Element nicht „position:relative“ hat, wird das „.mask“-Element, das „position:absolute“ hat, in Schritt 5 (nach der Positionierung der Elemente) darüber gezeichnet. Wenn jedoch „position:relative“ auf „.container“ angewendet wird, wird es zu einem positionierten Element und wird daher in Schritt 3 gezeichnet. Daher wird „.container“ zusammen mit seinen untergeordneten Elementen vor dem „ .mask“-Element, was dazu führt, dass die blaue Überlagerung unter dem Text erscheint.

Es ist wichtig zu beachten, dass die Reihenfolge, in der Elemente im DOM (Document Object Model) gezeichnet werden, nicht unbedingt der Reihenfolge in entspricht was sie optisch erscheinen. Die angegebenen Z-Indexwerte haben Vorrang bei der Bestimmung, welches Element oben angezeigt wird. Wenn jedoch kein Z-Index angegeben ist, wird die oben beschriebene Malreihenfolge verwendet.

Das obige ist der detaillierte Inhalt vonWie wirkt sich „position:relative' auf den Z-Index und die Stapelreihenfolge der Elemente in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!