Egenskapen z-index

Egenskapen z-index bestemmer hvem som vil være på toppen i tilfelle hvor flere elementer overlapper hverandre.

Syntaks

velger {
	z-index: tall | auto;
}

Tallet må være et heltall, positivt eller negativt. Kan være null.

Verdier

Verdi	Beskrivelse
Tall	Et heltall setter rekkefølgen for overlapping av elementer: ved overlapping av elementer vil den som har høyest `z-index` være øverst.
`auto`	Rekkefølgen for overlapping bygges automatisk: øverst vil det elementet være som er plassert nederst i HTML-koden.

Standardverdi: auto.

Eksempel

I dette eksemplet vil blokkene overlappe hverandre i rekkefølgen de følger i HTML- koden (z-index er ikke satt og vil ha standardverdien - auto). Den første blokken vil være nederst (rød), og den siste - øverst (grønn):

<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

La oss endre rekkefølgen for overlapping ved å sette z-index. Rød blokk - 3, blå - 2, grønn - 1. Rekkefølgen for overlapping vil endres til motsatt (øverst vil blokken med z-index 3 være):

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