# Contexte d’empilement

> Regroupement d'éléments dont l'ordre d'affichage en profondeur est géré comme un bloc indépendant, souvent à l'origine de problèmes de z-index inexpliqués.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/contexte-empilement/

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-index` toujours 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.