Propriété z-index

La propriété z-index détermine quel élément sera au premier plan dans le cas où plusieurs éléments se superposent.

Syntaxe

sélecteur {
	z-index: nombre | auto;
}

Le nombre doit être entier, positif ou négatif. Peut être zéro.

Valeurs

Valeur	Description
Nombre	Un entier définit l'ordre d'empilement des éléments : lorsque les éléments se superposent, celui qui se trouvera au-dessus est celui dont le `z-index` est le plus grand.
`auto`	L'ordre d'empilement est construit automatiquement : l'élément qui sera au-dessus est celui qui se trouve plus bas dans le code HTML.

Valeur par défaut : auto.

Exemple

Dans cet exemple, les blocs se superposeront les uns aux autres dans l'ordre de leur apparition dans le code HTML (z-index n'est pas défini et aura la valeur par défaut - auto). Le premier bloc sera tout en bas (rouge), et le dernier - tout en haut (vert) :

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

Exemple

Modifions l'ordre d'empilement en définissant z-index. Bloc rouge - 3, bleu - 2, vert - 1. L'ordre d'empilement sera inversé (le bloc avec z-index 3 sera tout en haut) :

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