Superposition z-index
Démo visuelle
Contexte d’empilement
Un contexte d’empilement est formé par tout élément répondant à des critères spécifiques (comme opacity < 1 ou transform). Une fois formé, ses enfants sont contenus dans ce contexte.
opacity: 0.9
filter: blur()
transform: scale(1)
will-change
contexte_demo.css
.parent {
position: relative;
z-index: 1; /* Crée un contexte */
}
.child {
position: absolute;
z-index: 999; /* Piégé ! */
}Enfant (999)
Parent (z:1)Voisin (z:2)
Pièges courants
Position statique
Z-index est ignoré sur les éléments avec position: static (par défaut). Utilisez toujours relative, absolute ou fixed.
Opacité et Transforms
Définir une opacité < 1 ou utiliser transform crée un nouveau contexte d'empilement, même sans valeur z-index.
La guerre du ‘9999’
Évitez les valeurs z-index arbitrairement élevées. Utilisez une échelle cohérente (10, 20, 30) pour garder vos couches gérables.