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.

Elemente können nur einen z-index besitzen, falls sie über eine Angabe zu position verfügen, die von static abweicht oder sie flex-items sind.[1]

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

Der Wert auto ist der Standard-Wert.

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]

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 optisch 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

Weblinks[Bearbeiten]