Atribuut z-index

Atribuut z-index määrab, mis element on pealpool juhul, kui mitu elementi katavad teineteist.

Süntaks

valija {
	z-index: täisarv | auto;
}

Täisarv peab olema positiivne või negatiivne. Võib olla null.

Väärtused

Väärtus	Kirjeldus
Täisarv	Täisarv määrab elementide pealekattumise järjekorra: elementide pealekattumisel on pealpool see, kelle `z-index` on suurem.
`auto`	Pealekattumise järjekord ehitatakse automaatselt: pealpool on see element, mis asub HTML-koodis allpool.

Vaikeväärtus: auto.

Näide

Selles näites kattuvad plokid teineteisele vastavalt nende järjestusele HTML- koodis (z-index pole määratud ja sellel on vaikeväärtus - auto). Esimene plokk on allpool (punane) ja viimane - pealpool (roheline):

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

Näide

Muudame pealekattumise järjekorda, määrates z-index. Punasele plokile - 3, sinisele - 2, rohelisele - 1. Pealekattumise järjekord muutub vastupidiseks (pealpool on plokk, mille z-index on 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;
}