Wie wirkt sich der CSS-Z-Index auf die Stapelreihenfolge der Elemente aus?

Die Stapelreihenfolge von CSS-Elementen verstehen

In CSS spielt die Z-Index-Eigenschaft eine entscheidende Rolle bei der Bestimmung der Stapelreihenfolge von Elementen , aber es kann verwirrend sein zu verstehen, wie es mit verschiedenen Positionierungseigenschaften interagiert.

Wie die Stapelreihenfolge Funktioniert

Die Stapelreihenfolge bezieht sich auf die relative Tiefe überlappender Elemente auf einer Webseite. Elemente mit höheren Z-Index-Werten erscheinen vor Elementen mit niedrigeren Werten. Der Z-Index gilt jedoch nur für positionierte Elemente (d. h. Elemente mit Position: absolut, relativ, fest oder klebrig).

Interaktion mit positionierten und nicht positionierten Elementen

• Nicht positionierte Elemente (Position: statisch) werden immer unter positionierten Elementen gestapelt.
• Wenn kein Z-Index angegeben ist für positionierte Elemente folgen sie der Standardstapelreihenfolge basierend auf der Reihenfolge des Quellcodes.
• Wenn Z-Index-Werte angewendet werden, werden positionierte Elemente basierend auf diesen Werten gestapelt, unabhängig von ihrer Quellcodereihenfolge.
• Elemente mit negativen Z-Index-Werten erscheinen hinter dem Hintergrund und den Rändern des Stammelements.

Stapelung Kontexte

Ein Stapelkontext ist ein rechteckiger Bereich im Dokument, der als Container für positionierte Elemente dient. Sobald ein Element positioniert und ein Z-Index angewendet wird, erstellt es einen neuen Stapelkontext, der seine untergeordneten Elemente von anderen Stapelkontexten trennt.

Auswirkungen für gemischte Elementtypen

1. Gemischte Geschwisterelemente:

• Wenn Geschwisterelemente unterschiedliche Positionen haben (gemischt positioniert und nicht positioniert), werden die positionierten Elemente mit Z-Indexwerten immer vor den nicht positionierten Elementen gestapelt .
• Wenn beide Geschwisterelemente mit Z-Indexwerten positioniert sind, erscheint das Element mit dem höheren Wert in vorne.

2. Verschachtelte und gemischte Geschwisterelemente:

• Wenn ein positioniertes übergeordnetes Element sowohl positionierte als auch nicht positionierte untergeordnete Elemente enthält:

  • Die positionierten untergeordneten Elemente sind innerhalb des Stapelkontexts des übergeordneten Elements gestapelt.
  • Die nicht positionierten untergeordneten Elemente werden unabhängig vom Z-Index unterhalb des positionierten übergeordneten Elements gestapelt Werte.
• Wenn verschachtelte positionierte Elemente widersprüchliche Z-Index-Werte haben, wird das Element mit dem höheren Wert im innersten Stapelkontext vorne angezeigt.

Beispiel

Betrachten Sie den folgenden HTML-Code Code:

<div>
  <div>

In diesem Beispiel erscheint Box 1 vor Box 2, da es einen höheren Z-Index innerhalb des von seinem übergeordneten Div erstellten Stapelkontexts hat. Box 2, die sowohl positioniert ist als auch einen niedrigeren Z-Index hat, erscheint hinter Box 1.

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