Comprendre la position z-index en CSS

La propriété z-index permet de gérer la superposition des éléments HTML sur l’axe Z, c’est-à-dire la profondeur. En d’autres mots : elle définit quel élément passe « devant » ou « derrière » les autres quand ils se chevauchent.

Elle ne fonctionne que sur des éléments positionnés avec position: relative, absolute, fixed ou sticky.

1. Exemple simple de superposition

Deux boîtes se chevauchent. Celle qui a le plus grand z-index passe devant l’autre.

.boite-bleue {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
  color: white;
  z-index: 1;
}

.boite-rouge {
  position: absolute;
  top: 40px;
  left: 40px;
  background: red;
  color: white;
  z-index: 2;
}

2. Sans positionnement, z-index ne fonctionne pas

Un élément doit avoir une position autre que static pour que z-index soit pris en compte.

.ignoré {
  z-index: 9999; /* ne sert à rien sans position */
}

3. Utilisation avec des éléments fixes

Tu veux garder un bouton toujours visible en haut ? Utilise position: fixed et un z-index élevé.

.bouton-fixe {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
}

(Fais défiler la page pour voir qu’il reste en place)

4. Le contexte d’empilement (stacking context)

Un nouvel « univers de profondeur » est créé à chaque fois qu’un élément a un position + un z-index. Les enfants ne peuvent pas dépasser ce cadre si un autre élément est devant à un niveau supérieur.

.parent {
  position: relative;
  z-index: 1;
}

.enfant {
  position: absolute;
  z-index: 9999; /* limité à son parent */
}

5. Valeurs négatives avec z-index

Tu peux aussi envoyer un élément derrière les autres avec une valeur négative.

.élément-dos {
  z-index: -1;
}

Bonnes pratiques

• Utilise z-index avec modération, et toujours sur des éléments positionnés
• Crée des niveaux logiques (ex : base = 1, menus = 10, overlays = 100)
• Évite d’abuser de grandes valeurs comme 99999 partout
• Teste toujours le comportement avec plusieurs éléments empilés

Conclusion

z-index te donne un contrôle précis sur l’ordre d’affichage des éléments HTML. Pour créer des menus déroulants, des fenêtres modales ou des bulles d’aide, c’est une propriété essentielle. Mais comme elle interagit avec les contextes d’empilement, il faut bien comprendre comment elle se comporte avec position.