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

csssé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) :

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#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) :

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

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

Результат: