Z-Index und Stapelkontexte

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

• Ebenen erzwingen
• Animationsanleitung: Ebenenerstellung erzwingen
• Informationen zum Z-Index

Wissen testen

Testen Sie Ihr Wissen über den Z-Index

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>