Analysieren Sie die Stapelreihenfolge von Elementen in CSS

• Wenn das Attribut z-index und das Attribut position nicht enthalten sind, ist die Stapelreihenfolge aller Elemente gleich wie im HTML-Dokument. Die Reihenfolge des Erscheinens ist dieselbe. (Mit Ausnahme des Sonderfalls der Verwendung negativer Ränder zum Überlappen von Inline-Elementen.)

• Wenn das Element schwebend ist, wird das schwebende Blockelement zwischen dem nicht positionierten Blockelement und dem positionierten platziert Blockelement Mit anderen Worten, schwebende Elemente werden im normalen Fluss über untergeordneten Blockelementen und im normalen Fluss unter untergeordneten Inline-Elementen angezeigt. Wenn das Positionsattribut zum Element

• hinzugefügt wird, werden alle Elemente mit dem Positionsattribut und ihre Unterelemente über anderen Elementen ohne das Positionsattribut angezeigt.

• z-index ist nur für Elemente wirksam, bei denen das Positionsattribut festgelegt ist Das Z-Index-Attribut ist für Elemente ohne das Positionsattribut nicht wirksam.

Das Z-Index-Attribut generiert einen Stapelkontext

Eine Gruppe von Elementen mit einem gemeinsamen übergeordneten Element, die gemeinsam vorwärts oder rückwärts verschoben werden, bilden einen Stapelkontext . Jeder Stapelkontext verfügt über ein einzelnes Stammelement. Wenn ein neuer Stapelkontext für das Element erstellt wird, sind alle untergeordneten Elemente im Stapelkontext auf einen festen Bereich in der Stapelreihenfolge beschränkt. Ein Stapelkontext bildet ein Ganzes und seine internen Elemente weisen relativ unterschiedliche Stapelreihenfolgen auf. Im Vergleich zu anderen Stapelkontexten können sie jedoch nur als Ganzes nach oben oder unten verschoben werden.

Laienhaft ausgedrückt: Wenn ein Element am unteren Rand seines Stapelkontexts platziert wird, gibt es keine Möglichkeit, es über einem anderen Stapelkontextelement mit einer höheren Ebene anzuzeigen, selbst wenn es sich um einen Z-Index handelt auf unendlich gesetzt.

Konstruktionsregeln für den Stapelkontext

• Das Wurzelelement des Dokuments

• hat das Positionsattribut ( (mit Ausnahme des Attributs static) und setzen Sie außerdem das Z-Index-Attribut auf „Auto“. Das Element

• hat das Opazitätsattribut und der Wert ist kleiner als 1.

• Einige neue CSS-Attribute, wie Filter, CSS-Regionen und andere Attribute, die ein Off-Screen-Rendering erfordern, können es Elementen ermöglichen, einen Stapelkontext zu bilden.

• Für Elemente, die position:fixed angeben, ist der technische Z-Index automatisch

Die Stapelreihenfolge von Unterelementen innerhalb derselben Stapelung context

Von unten nach oben (root < -index < index-aotu < +index < position):

1. Das Wurzelelement des Stapelkontexts .

2. hat das Positionsattribut festgelegt und das Element mit einem negativen Z-Index und seinen Unterelementen, das Element mit einem größeren Z-Indexwert wird über dem kleineren Element platziert und Die Elemente mit demselben Attributwert werden in der Reihenfolge gestapelt, in der sie im HTML erscheinen.

3. Es gibt kein Element mit festgelegter Position.

4. hat das Positionsattribut gesetzt und das Z-Index-Attribut ist automatisch.

5. hat das Positionsattribut gesetzt und den Z-Index Das Attribut ist automatisch. Elemente mit positivem Wert.

Fall unterschiedlicher Stapelkontexte

• Stacking-Kontexte können andere Stacking-Kontexte einbetten.

• Jeder Stapelkontext und sein Statistikkontext sind unabhängig.

• Die Unterelemente im Stapelkontext werden in der oben genannten Reihenfolge platziert.

• Der Z-Index eines untergeordneten Stacking-Kontexts innerhalb eines Stacking-Kontexts ist nur innerhalb des übergeordneten Stacking-Kontexts von Bedeutung.

Was für ein tiefgreifendes und selten erforschtes Wissensgebiet: Wenden Sie die Zusammenfassung langsam in der Praxis an!

[Verwandte Empfehlungen]

1.Kostenloses CSS-Online-Video-Tutorial

2. CSS-Online-Handbuch

3. php.cn Dugu Jiujian (2)-CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonAnalysieren Sie die Stapelreihenfolge von Elementen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!