Proprietatea z-index

Proprietatea z-index stabilește care element va fi deasupra în cazul în care mai multe elemente se suprapun unul peste altul.

Sintaxă

selector {
	z-index: număr | auto;
}

Numărul trebuie să fie întreg, pozitiv sau negativ. Poate fi zero.

Valori

Valoare	Descriere
Număr	Numărul întreg stabilește ordinea de suprapunere a elementelor: la suprapunerea elementelor unul peste altul, deasupra va fi acela al cărui `z-index` este mai mare.
`auto`	Ordinea de suprapunere este construită automat: deasupra va fi acel element care este poziționat mai jos în codul HTML.

Valoarea implicită: auto.

Exemplu

În acest exemplu, blocurile se vor suprapune unul peste altul în ordinea în care apar în codul HTML (z-index nu este setat și va avea valoarea implicită - auto). Primul bloc va fi în fundal (roșu), iar ultimul - deasupra tuturor (verde):

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

Exemplu

Să schimbăm ordinea de suprapunere, setând z-index. Blocului roșu - 3, blocului albastru - 2, blocului verde - 1. Ordinea de suprapunere se va schimba în ordinea inversă (deasupra tuturor va fi blocul cu 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;
}