Wie steuert CSS Z-Index die Stapelreihenfolge von HTML-Elementen?-CSS-Tutorial-php.cn

Wie steuert CSS Z-Index die Stapelreihenfolge von HTML-Elementen?

Mary-Kate Olsen

Freigeben： 2024-12-25 03:47:11

Original

121 Leute haben es durchsucht

How Does CSS z-index Control the Stacking Order of HTML Elements?

Grundlegende Informationen zur Z-Index-Stapelreihenfolge

Positionieren von Elementen mit Z-Index

Die Z-Index-Eigenschaft in CSS bestimmt die Stapelreihenfolge positionierter Elemente . Konkret bestimmt es, welche Elemente vor oder hinter anderen auf der Z-Achse erscheinen, die die Tiefe auf einer dreidimensionalen Ebene darstellt.

Auswirkungen auf positionierte Elemente

Z-Index funktioniert nur auf Elementen mit einer anderen als statischen Position (d. h. absolut, relativ, fest oder klebrig). Es wirkt sich nicht auf Elemente mit einer statischen Position oder Elemente aus, die mithilfe von Floats positioniert werden.

Stapelkontexte

Ein Stapelkontext wird erstellt, wenn ein Element positioniert wird und ein Z-Index angewendet wird. Innerhalb eines Stapelkontexts legt die Z-Index-Eigenschaft die Stapelreihenfolge des positionierten Elements und seiner Nachkommen fest. Stapelkontexte verhindern, dass Elemente in einem Kontext die Stapelreihenfolge von Elementen in einem anderen Kontext beeinträchtigen.

Stapelreihenfolgeregeln

Die Stapelreihenfolge von Elementen ohne angegebenen Z-Index ist wie folgt:

Hintergründe und Ränder des Wurzelelements
Nicht positionierter, nicht schwebender Block Elemente
Nicht positionierte schwebende Elemente
Inline-Elemente
Positionierte Elemente

Wenn eine Z-Index-Eigenschaft angewendet wird, ist die Stapelreihenfolge geändert:

Hintergründe und Ränder des Wurzelelements
Positioniert Elemente mit einem Z-Index von weniger als 0
Nicht positionierte, nicht schwebende Blockelemente
Nicht positionierte schwebende Elemente
Inline-Elemente
Positionierte Elemente mit einem Z-Index von 0
Positionierte Elemente mit einem Z-Index größer als 0

Beispiele für die Stapelreihenfolge

Gemischte Geschwister

s mit und ohne Position:

div.sibling -1 hat Position: statisch und Z-Index: 0
div.sibling-2 hat Position: absolut und Z-Index: 1

Ergebnis: div.sibling-2 wird vor div.sibling-1 angezeigt, da sein Z-Index höher ist.

Verschachtelte

s mit Geschwistern

div.container hat Position: statisch und Z-Index: 0
- div.child-1 hat Position : statisch und Z-Index: 0
- div.child-2 hat Position: absolut und Z-Index: 1
div.sibling hat Position: relativ und Z-Index: 2

Ergebnis: div.sibling wird vorne angezeigt der beiden untergeordneten Divs, da es mit einem höheren Z-Index in einem anderen Stapelkontext positioniert ist.

Das obige ist der detaillierte Inhalt vonWie steuert CSS Z-Index die Stapelreihenfolge von HTML-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie kann ich eine Sticky-Fußzeile erstellen, die am Ende der Seite oder im Inhalt verbleibt, je nachdem, was darunter liegt? Nächster Artikel：Wie kann ich mit CSS3 einen reibungslosen Hintergrundbildübergang erzielen?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2289

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2429

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2041

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...