The CSS Podcast – 019: Z-Index and Stacking contexts
Angenommen, Sie haben einige Elemente, die absolut übereinander positioniert sind. Sie könnten HTML-Code wie folgt schreiben:
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
Aber welche liegt standardmäßig übereinander? Um zu wissen, welches Element dafür geeignet ist, müssen Sie den Z-Index und Stapelkontexte kennen.
Z-Index
Mit der Eigenschaft z-index
wird explizit eine Ebenenreihenfolge für HTML basierend auf dem 3D-Bereich des Browsers festgelegt, der Z-Achse.
Dies ist die Achse, die zeigt, welche Ebenen sich näher an Ihnen und weiter von Ihnen entfernt befinden.
Die vertikale Achse im Web 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 anderen Elementen angezeigt, wenn sie einen höheren Wert für z-index
haben.
Wenn für Ihre Elemente kein z-index
festgelegt ist, ist das Standardverhalten die Reihenfolge der Dokumentquellen, die die Z-Achse vorgibt.
Das bedeutet, dass Elemente, die sich weiter unten im Dokument befinden, über Elementen davor liegen.
Wenn Sie im normalen Ablauf einen bestimmten Wert für z-index
festlegen und dieser nicht funktioniert, müssen Sie für den position
-Wert des Elements einen anderen Wert als static
festlegen.
Dies ist ein häufiger Ort, an dem 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 Flex- oder Rasterelementen ändern können, ohne position: relative
hinzuzufügen.
Negativer Z-Index
Wenn Sie ein Element hinter einem anderen Element festlegen möchten, 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 das Element .child
dahinter.
Fügen Sie .my-element
den folgenden CSS-Code hinzu. Das .child
-Element befindet sich nicht dahinter.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
Da .my-element
jetzt einen position
-Wert hat, der nicht static
ist, und einen z-index
-Wert, der nicht auto
ist, wurde ein neuer Stapelkontext erstellt.
Das bedeutet, dass .child
auch dann nicht hinter .my-parent
liegen würde, wenn Sie für z-index
den Wert -999
festlegen.
Kontext stapeln
Ein Stapelkontext ist eine Gruppe von Elementen, die ein gemeinsames übergeordnetes Element haben und auf der z-Achse gemeinsam nach oben und unten verschoben werden.
In diesem Beispiel hat das erste übergeordnete Element den z-index
-Wert 1
. Dadurch wird ein neuer Stapelkontext erstellt.
Das untergeordnete Element hat für z-index
den Wert 999
.
Neben diesem übergeordneten Element befindet sich ein weiteres übergeordnetes Element mit einem untergeordneten Element.
Das übergeordnete Element hat einen z-index
von 2
und das untergeordnete Element hat ebenfalls einen z-index
von 2
.
Da beide übergeordneten Elemente einen Stapelkontext erstellen, basiert der z-index
aller untergeordneten Elemente auf dem jeweiligen übergeordneten Element.
Die z-index
von Elementen innerhalb eines Stapelkontexts sind immer relativ zur aktuellen Reihenfolge des übergeordneten Elements im eigenen Stapelkontext.
Stacking-Kontext erstellen
Sie müssen z-index
und position
nicht anwenden, um einen neuen Stapelkontext zu erstellen.
Sie können einen neuen Stapelkontext erstellen, indem Sie einen Wert für Attribute hinzufügen, die eine neue zusammengesetzte Ebene wie opacity
, will-change
und transform
erstellen.
Eine vollständige Liste der Properties finden Sie hier.
Stellen Sie sich zur Erklärung, was eine zusammengesetzte Ebene ist, 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 – etwa durch eine Änderung seiner Position –, muss der Browser zurückgehen und überdenken, was gezeichnet werden soll.
Zur Verbesserung der Leistung erstellt der Browser neue zusammengesetzte Ebenen, die über das Canvas gelegt werden.
Das ist ähnlich wie ein Haftnotizen:
Das Verschieben und Ändern der Notiz hat keinen großen Einfluss auf den gesamten Canvas.
Für Elemente mit opacity
, transform
und will-change
wird eine neue zusammengesetzte Ebene erstellt, da diese sich sehr wahrscheinlich ändern werden. Der Browser stellt also sicher, dass diese Änderung so leistungsfähig wie möglich ist, indem er die GPU zum Anwenden von Stilanpassungen verwendet.
Ressourcen
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über den Z-Index
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Welcher Artikel wird standardmäßig oben angezeigt?
Welche Eigenschaft des Elements sollten Sie überprüfen, wenn der Z-Index nicht funktioniert?
display
relative
position
static
festgelegt ist.animation
Benötigen Flexbox und Raster position: relative
?
position: relative
.