Z-index-Eigenschaft

Die Eigenschaft z-index legt fest, welches Element im Vordergrund angezeigt wird, wenn sich mehrere Elemente überlappen.

Syntax

cssSelektor {
  z-index: Zahl | auto;
}

Die Zahl muss ganzzahlig sein, positiv oder negativ. Kann null sein.

Werte

Wert	Beschreibung
Zahl	Eine ganze Zahl legt die Reihenfolge der Überlagerung von Elementen fest: Beim Überlappen von Elementen wird dasjenige, das den höheren `z-index` hat, oben angezeigt.
`auto`	Die Überlagerungsreihenfolge wird automatisch erstellt: Das Element, das im HTML-Code weiter unten steht, wird oben angezeigt.

Standardwert: auto.

Beispiel

In diesem Beispiel werden sich die Blöcke in der Reihenfolge ihrer Anordnung im HTML-Code überlappen (z-index ist nicht gesetzt und hat den Standardwert - auto). Der erste Block wird ganz unten liegen (rot), und der letzte - oben (grün):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
}

Результат:

Beispiel

Ändern wir die Überlagerungsreihenfolge, indem wir z-index setzen. Dem roten Block - 3, dem blauen - 2, dem grünen - 1. Die Überlagerungsreihenfolge wird sich umkehren (ganz oben wird der Block mit z-index 3 sein):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
  z-index: 3;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
  z-index: 2;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
  z-index: 1;
}

Результат: