Egenskaben z-index

Egenskaben z-index bestemmer, hvilket element der vil være øverst, hvis flere elementer overlapper hinanden.

Syntaks

selector {
	z-index: tal | auto;
}

Tallet skal være et heltal, positivt eller negativt. Det kan være nul.

Værdier

Værdi	Beskrivelse
Tal	Et heltal angiver rækkefølgen for overlapping af elementer: når elementer overlapper hinanden, vil det element med den højeste `z-index` være øverst.
`auto`	Overlappingsrækkefølgen bygges automatisk: det element, der er placeret længere nede i HTML-koden, vil være øverst.

Standardværdi: auto.

Eksempel

I dette eksempel vil blokkene overlappe hinanden i den rækkefølge, de vises i HTML-koden (z-index er ikke angivet og vil have standardværdien - auto). Den første blok vil være nederst (rød), og den sidste - øverst (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;
}

Eksempel

Lad os ændre overlappingsrækkefølgen ved at angive z-index. Den røde blok får 3, den blå får 2, og den grønne får 1. Overlappingsrækkefølgen vil blive vendt (øverst vil være blokken med z-index 3):

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