Z-index
Z
Definition complete
Le z-index est une propriete CSS determinant l'ordre d'empilement (superposition) des elements positionnes sur une page web. Les elements avec un z-index plus eleve apparaissent au-dessus des elements avec un z-index plus faible.
Le z-index ne fonctionne que sur les elements avec une position autre que static (relative, absolute, fixed, sticky) ou avec certaines proprietes creant un contexte d'empilement (opacity, transform, filter, etc.).
Le concept de stacking context (contexte d'empilement) est crucial : un element cree un nouveau contexte, et ses enfants sont empiles relativement a ce contexte, pas a la page globale. Cela explique pourquoi un z-index eleve peut parfois ne pas fonctionner comme attendu.
Les bonnes pratiques incluent : utiliser une echelle de z-index definie (ex: 10, 20, 30... pour laisser de la marge), documenter les niveaux utilises, et eviter les "guerres de z-index" avec des valeurs arbitrairement elevees (z-index: 99999).
Exemples pratiques
- Modal au-dessus :
.modal { position: fixed; z-index: 100; }- La modale apparait au-dessus du contenu (z-index implicite 0). - Echelle CSS :
:root { --z-dropdown: 10; --z-sticky: 20; --z-modal: 30; --z-toast: 40; }- Systeme organise et maintenable. - Debug : Element avec z-index: 9999 toujours derriere un autre ? Verifier si le parent cree un stacking context qui limite la portee du z-index.
A quoi sert Z-index ?
Le z-index sert a gerer la superposition des elements (modales, menus, tooltips), resoudre les conflits de superposition, creer des effets visuels (parallaxe), et organiser les couches d'interface.
Z-index en pratique chez 123web
Chez 123web, nous gerons le z-index de maniere methodique. Echelle definie, documentation des niveaux, et comprehension des stacking contexts : vos interfaces superposent les elements de maniere previsible et maintenable.