Proprietà z-index

La proprietà z-index stabilisce chi sarà in alto nel caso in cui più elementi si sovrappongano.

Sintassi

selettore {
	z-index: numero | auto;
}

Il numero deve essere intero, positivo o negativo. Può essere zero.

Valori

Valore	Descrizione
Numero	Un numero intero imposta l'ordine di sovrapposizione degli elementi: quando gli elementi si sovrappongono, quello in alto è quello con il `z-index` maggiore.
`auto`	L'ordine di sovrapposizione è costruito automaticamente: sarà più in alto l'elemento che si trova più in basso nel codice HTML.

Valore predefinito: auto.

Esempio

In questo esempio i blocchi si sovrapporranno secondo l'ordine in cui compaiono nel codice HTML (z-index non è impostato e avrà il valore predefinito - auto). Il primo blocco sarà in fondo (rosso), e l'ultimo - più in alto (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;
}

Esempio

Cambiamo l'ordine di sovrapposizione, impostando z-index. Al blocco rosso - 3, a quello blu - 2, a quello verde - 1. L'ordine di sovrapposizione cambierà inverso (più in alto sarà il blocco con 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;
}