CSS/Eigenschaften/Positionierung/z-index

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft z-index gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium dargestellt werden. Elemente mit einem größeren z-index liegen dabei näher am Betrachter.

Beachten Sie: Ein Element beachtet die z-index Eigenschaft nur, falls es positioniert ist. Diese Bedingung kann auf zwei Arten erfüllt werden. Entweder muss das Element über eine Angabe zu position verfügen, die von static abweicht, oder es muss Kind eines positionierenden Containers wie Flexbox[1] oder Grid sein.

Ohne die z-index-Eigenschaft werden alle Elemente, deren Anzeigebereiche sich überlappen, in der Reihenfolge übereinandergelegt, in der sie im HTML-Quelltext definiert sind. Für jedes dieser HTML-Elemente kann ein z-index vergeben werden. Je größer der Wert, umso „höher“ liegt das Element. Ein Element mit z.B. dem z-index 10 überdeckt ein Element mit dem z-index 5.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
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: rgba(128, 128, 128, .6);
        left: 2em;
        padding-bottom: 5em;
        top: 5em;
        z-index: 2;
      }
      #element2 {
        background-color: rgba(0, 0, 255, .4);
        left: 4em;
        top: 8em;
        z-index: 9;
      }
      #element3 {
        background-color: rgba(255, 215, 0 , .8);
        left: 6em;
        top: 11em;
        z-index: 0;
      }
      #element4 {
        background-color: rgba(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.

Das z-index-Attribut kann folgende Werte besitzen:

  • auto, Das Element wird automatisch nach der Reihenfolge im Quelltext positioniert. Später definiert bedeutet näher am Betrachter.
  • 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.

Stapelkontext[Bearbeiten]

Die Anordnung der Elemente im Dokument erfolgt auf Grundlage von Stapelkontexten. Ein solcher Kontext entsteht beispielsweise, wenn ein positioniertes Element einen z-index Wert ungleich auto bekommt. Die Stapelkontexte bilden eine Baumstruktur. Wurzel dieses Baumes ist der Standard-Stapelkontext des <html> Elements.

Beachten Sie: Die z-index Anordnung des Dokuments erfolgt basierend auf Stapelkontexten. Jeder Stapelkontext stapelt ausschließlich seine Kind-Kontexte. Elemente von verschiedenen Stapelkontexten werden nicht ineinander geschoben.

Die grundlegende Reihenfolge beim Darstellen eines Stapelkontextes ist, grob gesagt:

  • Hintergrund und Rahmen des Elements, das den Stapelkontext bildet
  • Kind-Stapelkontexte der Elemente mit negativem z-index
  • Die Elemente mit z-index:auto oder z-index:0, wie im HTML angetroffen
  • Kind-Stapelkontexte der Elemente mit positivem z-index

Die ganze Wahrheit ist etwas komplizierter und findet sich im Anhang E der CSS2 Spezifikation[2].

Per z-index angeordnete Elemente erzeugen für ihre Kindelemente einen eigenen Stapelkontext. Das bedeutet, dass die Eigenschaft nur auf die Kindelemente selbst wirkt.

Beispiel ansehen …
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>z-index im eigenen Stapelkontext</title>
    <style type="text/css">
        /* einige Styleangaben hier weggelassen */
	ul {
	  position: absolute;
	  top: 5em;
	  left: 2em;
	  background: rgba(193, 168, 134, .6);
	}
	li {
	  position: absolute;
	  background: rgba(133, 192, 138, .8);
	}
	li:nth-child(1) { top: 1em; left: 3em; }
	li:nth-child(2) { top: 3em; left: 4.5em; }
	li:nth-child(3) { top: 5em; left: 6em; }
	li:nth-child(4) { top: 7em; left: 7.5em; }
	li:nth-child(5) { top: 9em; left: 9em; }
	aside {
	  position: absolute;
	  background: rgba(135, 69, 125, .7);
	}
	aside:last-of-type { 
	  top: 8em; right: 0;
	}
     </style>
  </head>
  <body>
    <section id="demo">
      <h1>z-index</h1>
      <aside style="z-index: 50">Element mit z-index: 50</aside>
      <ul style="z-index: 40">
	<li>z-index: auto</li>
	<li style="z-index: 80">z-index: 80</li>
	<li>z-index: auto</li>
	<li>z-index: auto</li>
	<li style="z-index: 10">z-index: 10</li>
      </ul>
      <aside style="z-index: 30">Element mit z-index: 30</aside>
    </section>
    <!-- Vergleich ohne z-index hier weggelassen -->
  </body>
</html>
Die grün eingefärbten li-Elemente bilden ihren eigenen Stapel, ihre z-index-Werte sind nur innerhalb dieses gültig. So überdeckt das Element mit dem z-index 80 alle anderen li-Elemente, nicht aber das div-Element mit dem z-index 50. Die z-index-Werte der div-Elemente und der Liste selbst definieren die Stapelreihenfolge dieser Elemente, ohne auf etwaige Kindelemente Rücksicht zu nehmen. Um ein Kindelement visuell hinter sein Elternelement zu positionieren, muss ein negativer z-index verwendet werden.

Quellen[Bearbeiten]

  1. sitepoint.com: How z-index and Auto Margins Work in Flexbox
  2. w3.org: Elaborate description of Stacking Contexts

Weblinks[Bearbeiten]