Un menu déroulant qui reste stubbornément caché derrière une bannière, malgré un z-index largement supérieur : ce cas classique frustre presque tous les développeurs CSS au moins une fois, et sa cause tient rarement à une valeur de z-index mal choisie, mais à un contexte parent qui isole complètement le calcul de profondeur.
Ce qui déclenche sa création
Un tel contexte apparaît dès qu’un élément combine une propriété position différente de static avec une valeur de z-index définie, mais aussi dans bien d’autres cas moins connus : une opacity inférieure à 1, une propriété transform, filter ou will-change non initiale, ou un élément flexible/grille avec un z-index. Une fois créé, ce contexte devient une boîte fermée : le z-index de ses enfants n’est comparé qu’entre eux, jamais directement à celui d’éléments extérieurs au contexte.
Exemple du piège classique
.entete { position: relative; z-index: 1; }
.entete .logo { transform: scale(1.1); } /* crée un contexte imbriqué */
.menu-deroulant { position: absolute; z-index: 9999; } /* piégé dans .entete */
Bon à savoir
- Ajouter un
z-indextoujours plus élevé ne résout jamais ce type de problème si l’élément est enfermé dans un contexte parent limité : il faut remonter le composant hors de ce contexte, ou en supprimer la cause. - Les outils de développement des navigateurs modernes (onglet « Mise en page » de Firefox, ou l’inspecteur 3D de Chrome) permettent de visualiser directement ces contextes imbriqués.
- Dans un thème à base de blocs WordPress, un bloc « Groupe » avec un fond en superposition applique souvent une opacité ou un flou qui crée involontairement un tel contexte.