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. 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. Umso größer der Wert, umso „höher“ liegt das Element. Ein Element mit z.B. demz-index 10 überdeckt ein Element mit dem z-index 5.

  • CSS 2.0
  • IE 4
  • Firefox 1.0
  • Opera 5.12
  • Safari 1.0
  • Konqueror 3.1
  • Chrome
Beispiel So sieht's aus
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiel für die Überlappung der Elemente mit z-index</title>
    <style>
      div { position:absolute; padding: 1.5em; }
      #element1 { top:5em; left:2em; z-index:2; background-color: rgba(128, 128, 128, .6); padding-bottom: 5em;}
      #element2 { top:8em; left:4em; z-index:9; background-color: rgba(0, 0, 255, .4); }
      #element3 { top:11em; left:6em; z-index:0; background-color: rgba(255, 215, 0 , .8); }
      #element4 { top:9em; left:10em; z-index:-10; background-color: rgba(128, 0, 0, 1); padding-left: 8em;}
    </style>
  </head>
  <body>
    <h1>Beispiel für die Überlappung der Elemente mit z-index</h1>
    <div id='element1'>Element mit z-index 2</div>
    <div id='element2'>Element mit z-index 9</div>
    <div id='element3'>Element mit z-index 0</div>
    <div id='element4'>Element mit z-index -10</div>
  </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-Indexe 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.

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 So sieht's aus
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>z-index im eigenen Stapelkontext</title> <style type="text/css"></source><source lang="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; } div div { position: absolute; background: rgba(135, 69, 125, .7); } div div:last-of-type { top: 8em; right: 0; } </style> </head> <body> <div id="demo"> <h1>z-index</h1> <div style="z-index: 50">Element mit z-index: 50</div> <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> <div style="z-index: 30">Element mit z-index: 30</div> </div> <!-- 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 übedeckt 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.
Von „http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/z-index“
Hilfe
Weitere Bereiche
Flattr