À quoi sert la propriété z-index en CSS?

La propriété z-index en CSS contrôle l’ordre d’empilement des éléments positionnés le long de l’axe Z. Les éléments avec une valeur z-index plus grande sont placés au-dessus des éléments avec une valeur inférieure.

Points clés:

• S’applique uniquement aux éléments positionnés (position: relative, absolute, fixed, sticky).
• La valeur peut être un nombre (positif, négatif ou zéro).
• La valeur automatique (auto) correspond à l’ordre dans l’arbre DOM.
• Les valeurs négatives de z-index peuvent placer un élément sous l’élément parent et son contenu.
• z-index crée un contexte d’empilement (stacking context). Les éléments à l’intérieur d’un même contexte sont ordonnés par leur z-index, mais tout le contexte se comporte comme une unité par rapport à d’autres contextes.

Ordre d’empilement par défaut (sans z-index):

1. Fond et bordures de l’élément racine.
2. Éléments positionnés avec z-index négatif.
3. Éléments de bloc en flux normal.
4. Éléments flottants (float).
5. Éléments en ligne en flux normal.
6. Éléments positionnés avec z-index: auto ou z-index: 0.
7. Éléments positionnés avec z-index positif.

Exemple:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Au-dessus du bleu */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* En dessous du rouge */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

Dans ce cas, le bloc rouge (z-index: 1) sera au-dessus du bloc bleu (z-index: 0).