Z-Index und Stapelkontexte

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.

Jede Achse, die das Element umgibt

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?

1
Es ist ganz hinten.
2
Versuch es noch einmal.
3
Versuch es noch einmal.
4
Das letzte im Dokument steht oben, ja!

Welche Eigenschaft des Elements sollten Sie überprüfen, wenn der Z-Index nicht funktioniert?

display
Dies ist nicht die wahrscheinliche Eigenschaft dafür, warum der Z-Index nicht funktioniert.
relative
Dies ist ein CSS-Wert, keine Eigenschaft.
position
Achten Sie darauf, dass hier eine andere Einstellung als static festgelegt ist.
animation
Dies ist nicht die wahrscheinliche Eigenschaft dafür, warum der Z-Index nicht funktioniert.

Benötigen Flexbox und Raster position: relative?

Ja
Für diese Displaytypen ist es nicht erforderlich.
Nein
Die Verwendung des Z-Index in einer Flexbox oder einem Rasterlayout funktioniert ohne position: relative.