CSS/Tutorials/Ausrichtung/z-index

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Ausrichtung(Weitergeleitet von Top-Layer)
Wechseln zu: Navigation, Suche

Die Eigenschaft z-index gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium von hinten nach vorne angeordnet werden. Das ist von Bedeutung, wenn die Elemente sich überlappen. Elemente mit einem größeren z-index liegen dabei näher am Betrachter und können Elemente mit kleinerem z-index überlagern. Der Wert des z-index ist eine ganze Zahl und kann negativ und positiv sein.

Das z-index-Attribut kann folgende Werte besitzen:

  • auto, das Element wird behandelt, als hätte es den z-index Wert 0. Es bildet aber keinen neuen Stapelkontext.
  • Eine ganze Zahl, das Element wird wie oben beschrieben positioniert. Eine größere Zahl bedeutet näher am Betrachter.
  • inherit, z-index des Elternelements.

Wird z-index für ein Element nicht explizit gesetzt, ist der Standard-Wert auto. Eine Vererbung des z-index des Elternelements muss explizit mit z-index:inherit ausgelöst werden.

Beachten Sie: Sie sollten die z-Indices nicht lückenlos zuweisen, da Sie sonst bei nachträglichen Änderungen keine Elemente mehr „dazwischenschieben“ können.
Beachten Sie: Elemente mit einem positiven z-Index liegen „vor“ Elementen ohne z-Index, Elemente mit einem negativen z-Index „hinter“ Elementen ohne z-Index.

Wenn sich zwei Elemente mit gleichem z-index überlappen, dann ist das Element weiter vorn, das im HTML Quelltext später definiert wurde. Das ist allerdings nicht immer so und wird im folgenden Abschnitt genauer beschrieben.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>z-index</title>
    <style>
      main {
        position: relative;
      }
      aside {
        position: absolute;
        padding: 1.5em;
      }
      #element1 {
        background-color: rgb(128 128 128 / .6);
        left: 2em;
        padding-bottom: 5em;
        top: 5em;
        z-index: 2;
      }
      #element2 {
        background-color: rgb(0 0 255 / .4);
        left: 4em;
        top: 8em;
        z-index: 9;
      }
      #element3 {
        background-color: rgb(255 215 0 / .8);
        left: 6em;
        top: 11em;
        z-index: 0;
      }
      #element4 {
        background-color: rgb(128 0 0 / 1);
        left: 10em;
        padding-left: 8em;
        top: 9em;
        z-index: -10;
      }
    </style>
  </head>
  <body>
    <h1>Verwendung von <code>z-index</code></h1>
    <main>
      <h2>Beispiel für die Überlappung der Elemente</h2>
      <aside id="element1">Element mit z-index 2</aside>
      <aside id="element2">Element mit z-index 9</aside>
      <aside id="element3">Element mit z-index 0</aside>
      <aside id="element4">Element mit z-index -10</aside>
    </main>
  </body>
</html>

Alle Elemente bekommen die position-Eigenschaft absolute und jedes weitere Element wird weiter unten und weiter rechts platziert. Außerdem bekommen sie zur Unterscheidung verschiedene Hintergrundfarben. Das erste Element wird genauso wie das dritte Element unter dem zweiten Element angezeigt, da es den größten z-index besitzt.

Stapelkontexte

Um zu verstehen, wie die Anordnung überlappender HTML-Elemente wirklich erfolgt, ist zunächst das Verständnis des Stapelkontexts erforderlich. Denn die z-index-Eigenschaft wirkt nicht auf HTML-Elemente, sondern auf die Stapelkontexte, die für sie erzeugt werden.

Die Layout-Engine Ihres Browsers bildet Stapelkontexte für

  • das Root-Element des Dokuments
  • Elemente mit position:relative oder position:absolute, deren z-index nicht den Wert auto hat
  • Elemente mit position:fixed oder position:sticky (ältere Desktop-Browser haben es bei sticky nicht getan)
  • Elemente, die ein Flex- oder Grid-Item sind und deren z-index nicht den Wert auto hat
  • CSS-Effekte wie opacity, transform, filter, perspective, clip-path, mask, mask-image oder mask-border
  • Elemente, die explizit mittels isolation:isolate einen Stapelkontext anfordern

Sobald ein Element einen Stapelkontext erzeugt, sind dieses Element und alle seine Kind-Elemente Teil dieses Stapelkontextes, und bewegen sich in der Z-Ordnung gemeinsam.

Beachten Sie: Stapelkontexte können ohne Positionierung zwar entstehen, aber damit ein z-index gesetzt werden kann, muss das Element positioniert werden.

Hierarchie von Stapelkontexten

Innerhalb eines Stapelkontexts können neue Stapelkontexte gebildet werden, die diesem dann untergeordnet sind. Diese untergeordneten Stapelkontexte sind an ihren Elternkontext gebunden, d. h. bei der Bestimmung der Z-Reihenfolge wirkt ein z-index nur auf Reihenfolge von gleichgeordneten Stapelkontexten.

Mit einem konstruierten Beispiel soll das visualisiert werden. Nehmen wir zum Beispiel an, unser Dokument enthält zwei aufeinander folgende <section>-Elemente. In der ersten Section befinden sich zwei <div>-Elemente mit position:absolute;.

Hierarchische Kontexte ansehen …
<style>
section {
   position: relative; z-index: 0; height: 200px;
}
#s1 {
   background-color: lightgrey;
   border: thick solid red;
   margin-bottom: -100px;
}
#s2 {
   background-color: rgb(200 200 200 / 0.8);
   border: thick solid blue;
}
div {
   position: absolute; width: 50%; height: 150px;
   border: medium solid black;
   z-index: 0;
}
#div1 {
   background-color: lightpink; left: 30px; top: 10px;
}
#div2 {
   background-color: palegreen; left: 60px; top: 20px;
}
</style>
...
<section id="s1">
   <div id="div1" style="background-color: red;">...</div>
   <div id="div2" style="background-color: blue;">...</div>
</section>
<section id="s2">
</section>

Die erste Section hat einen negativen margin-bottom und wird darum von der zweiten um 100 Pixel überlappt. Die zweite Section hat einen teiltransparenten Hintergrund, damit erkennbar ist, was sie verdeckt. Innerhalb der ersten Section liegen zwei absolut positionierte div-Elemente. Über CSS wird allen vier Elementen eine Positionierung und ein z-index:0 zugewiesen, deswegen entstehen für sie Stapelkontexte.

Die Hierarchie der Stapelkontexte stellt sich so dar:

root
   section 1
      div 1
      div 2
   section 2

Die beiden <div>-Elemente überlappen sich durch absolute Positionierung teilweise. #div2 ist vollständig sichtbar, #div1 wird verdeckt.

Probieren Sie es aus! Ergänzen Sie für #div1 die Angabe z-index: 1 und aktualisieren Sie das Frickl. Die Subkontext 1-1 Box wird nach vorne kommen, aber sie wird hinter der teilweise transparenten Kontext 2 Box bleiben. Entfernen Sie nun z-index:0 aus der CSS-Regel für section. Die Sections bilden jetzt keinen eigenen Stapelkontext mehr, sondern bleiben Teil des root-Kontextes. Dadurch hat #div1 die Möglichkeit, oberhalb von Section #s2 dargestellt zu werden.

Was Ihnen mit z-index allerdings nicht gelingt, ist die Platzierung eines HTML-Elementes hinter den Rahmen oder dem mit background-Eigenschaften festgelegten Hintergrund eines Elements.

Die ganze Wahrheit über Stapelkontexte ist noch etwas komplizierter und findet sich im Anhang E der CSS2 Spezifikation[1].

Quellen

  1. w3.org: Elaborate description of Stacking Contexts

Weblinks