Z-index-Eigenschaft

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

Syntax

Selektor {
	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):

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

#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):

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

#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;
}