Ce qu'il faut savoir

z-index compare les éléments à l'intérieur d'un même contexte d'empilement. Si deux éléments sont dans des contextes différents, la comparaison n'est pas directe.

Ce qui crée un nouveau contexte (cas fréquents)

un élément positionné avec z-index
opacity inférieure à 1
transform
filter
isolation: isolate

Exemple

.modal {
  position: fixed;
  z-index: 1000;
}

.header {
  position: sticky;
  z-index: 10;
}

Si un parent de .modal crée un contexte limité, la modal peut passer derrière d'autres couches malgré un grand z-index.

Méthode de debug

inspecte les parents dans les DevTools
vérifie position, transform, opacity, filter
simplifie les couches globales (header, overlay, modal)
définis une échelle de z-index (ex: 10, 100, 1000)

A retenir

z-index n'est pas absolu. Il dépend du contexte d'empilement. Comprendre cette règle évite des heures de debug.

Mini pratique

Crée une sidebar fixe, un header sticky et une modal. Fais volontairement un conflit de couches, puis corrige-le proprement.

Erreurs fréquentes

appliquer des valeurs sans vérifier l'impact sur mobile
surcharger la feuille de style au lieu de simplifier les sélecteurs
corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

la règle est-elle lisible et cohérente avec le reste du module ?
le rendu reste-t-il correct sur petit écran ?
la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.

Stacking context