CSS-Podcast – 019: Z-Index und Stacking-Kontexte
Nehmen wir an, Sie haben einige Elemente, die absolut positioniert sind, und sollen übereinander positioniert werden. Sie können einen HTML-Code schreiben:
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
Aber welches übereinander liegt standardmäßig? Um zu wissen, welches Element das tun würde, müssen Sie die Zusammenhänge zwischen dem Z-Index und dem Stapel verstehen.
Z-Index
Die z-index
legt explizit eine Ebenenreihenfolge für HTML fest, die auf dem 3D-Raum des Browsers, der Z-Achse, basiert.
Auf dieser Achse wird angegeben, welche Ebenen näher bei Ihnen und weiter von Ihnen entfernt sind.
Die vertikale Achse des Webs ist die Y-Achse und die horizontale Achse ist die X-Achse.
Die Eigenschaft z-index
akzeptiert einen numerischen Wert, der eine positive oder negative Zahl sein kann.
Elemente werden über einem anderen Element angezeigt, wenn sie einen höheren z-index
-Wert haben.
Wenn kein z-index
für Ihre Elemente festgelegt ist
lautet das Standardverhalten, dass die Z-Achse durch die Reihenfolge der Dokumentquellen bestimmt wird.
Das bedeutet, dass Elemente, die sich weiter unten im Dokument befinden, auf anderen Elementen vor ihnen liegen.
Im normalen Ablauf
Wenn Sie einen bestimmten Wert
für z-index
festlegen und es nicht funktioniert,
müssen Sie den Wert position
des Elements auf einen anderen Wert als static
festlegen.
Es kommt häufig vor, dass Menschen mit z-index
zu kämpfen haben.
Dies ist jedoch nicht der Fall, wenn Sie sich in einem Flexbox- oder Rasterkontext befinden.
da Sie den Z-Index von flexiblen oder Rasterelementen ändern können, ohne position: relative
hinzuzufügen.
Negativer Z-Index
Um ein Element hinter einem anderen Element zu platzieren,
Fügen Sie einen negativen Wert für z-index
hinzu.
.my-element {
background: rgb(232 240 254 / 0.4);
}
.my-element .child {
position: relative;
z-index: -1;
}
Solange .my-element
den Anfangswert für z-index
von auto
hat,
befindet sich dahinter das Element .child
.
Fügen Sie .my-element
das folgende CSS hinzu:
und das .child
-Element befindet sich nicht dahinter.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
Weil .my-element
jetzt einen position
-Wert hat, der nicht static
ist
und einen z-index
-Wert, der nicht auto
ist,
Es wurde ein neuer Stapelkontext erstellt.
Selbst wenn Sie für .child
also z-index
den Wert -999
festlegen,
liegt sie immer noch nicht hinter .my-parent
.
Stapelkontext
Ein Stapelkontext ist eine Gruppe von Elementen, die ein gemeinsames übergeordnetes Element haben und sich zusammen auf der z-Achse nach oben und unten bewegen.
In diesem Beispiel
hat das erste übergeordnete Element den z-index
1
,
und schafft einen neuen Stapelkontext.
Das untergeordnete Element hat den z-index
999
.
Neben diesem übergeordneten Element befindet sich ein weiteres übergeordnetes Element mit einem untergeordneten Element.
Das übergeordnete Element hat als z-index
den Wert 2
und das untergeordnete Element hat ebenfalls den z-index
2
.
Da beide übergeordneten Elemente
einen Stapelkontext erstellen,
Die z-index
aller untergeordneten Elemente basiert auf der des übergeordneten Elements.
Die z-index
von Elementen innerhalb eines Stapelkontexts
immer relativ zur aktuellen Reihenfolge des übergeordneten Elements in seinem eigenen Stapelkontext.
Stacking-Kontext erstellen
Sie müssen z-index
und position
nicht anwenden, um ein neues
Stacking Context
Sie können einen neuen Stapelkontext erstellen, indem Sie einen Wert für Eigenschaften hinzufügen, mit denen eine neue zusammengesetzte Ebene erstellt wird
z. B. opacity
, will-change
und transform
.
Sie können
Eine vollständige Liste der Unterkünfte finden Sie hier.
Um zu erklären, was eine zusammengesetzte Ebene ist, stellen Sie sich eine Webseite als Canvas vor. Ein Browser ermittelt anhand Ihres HTML- und CSS-Codes, wie groß der Canvas ist. Anschließend wird die Seite auf diesem Canvas gezeichnet. Wenn sich ein Element ändert, ändert sich die Position – der Browser muss dann zurückgehen und noch einmal überarbeiten, was er zu malen hat.
Um die Leistung zu verbessern,
erstellt der Browser neue zusammengesetzte Ebenen, die über das Canvas gelegt werden.
Sie ähneln Haftnotizen:
das Verschieben und Ändern hat keinen großen Einfluss auf den gesamten Canvas.
Für Elemente mit opacity
wird eine neue zusammengesetzte Ebene erstellt.
transform
und will-change
, da sich diese sehr wahrscheinlich ändern werden,
damit der Browser sicherstellt, dass Änderungen wie möglich ausgeführt werden, indem er die GPU zum Anwenden von Stilanpassungen nutzt.
Ressourcen
Wissen testen
Testen Sie Ihr Wissen über den Z-Index
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Welcher Artikel steht standardmäßig ganz oben?
Welche Eigenschaft Ihres Elements überprüfen Sie, wenn der Z-Index nicht funktioniert?
relative
position
display
animation
Benötigen Flexbox und Raster position: relative
?