contexte d'empilement en CSS : pourquoi un z-index élevé peut quand même perdre

Deux éléments ont un z-index de 9999 et 10, tout semble indiquer que le premier passera devant le second. Pourtant, à l'affichage, c'est l'inverse qui se produit. Ce genre de surprise est presque toujours le symptôme d'un contexte d'empilement : un sous-groupe d'éléments qui s'empilent entre eux, isolé du reste de la page, sans que le z-index seul puisse en sortir.

Comprendre ce mécanisme est indispensable dès qu'une interface superpose des éléments : un menu au-dessus du contenu, une modale au-dessus de tout, une info-bulle qui doit rester visible. Sans lui, le débogage d'un élément « caché derrière un autre » devient une suite d'essais au hasard sur des valeurs de z-index de plus en plus grandes, souvent sans effet.

Définition

Un contexte d'empilement est un regroupement d'éléments HTML dont l'ordre d'affichage les uns par rapport aux autres, sur l'axe qui va vers l'écran ou vers l'intérieur de la page, est décidé indépendamment du reste du document. À l'intérieur d'un contexte, les z-index se comparent normalement entre eux. Mais un contexte entier, avec tous ses enfants, s'empile en bloc par rapport aux éléments extérieurs, comme un seul objet.

Ce qui crée un nouveau contexte

La racine du document, l'élément html, crée toujours un contexte d'empilement. Ensuite, plusieurs déclarations CSS en créent un nouveau sur l'élément qui les porte, même sans le demander explicitement.

Cette liste n'est pas exhaustive, mais elle couvre la grande majorité des cas rencontrés en pratique. Le point commun : ce sont presque toujours des propriétés qui touchent à l'animation ou au rendu visuel, deux domaines où le navigateur a intérêt à isoler un élément dans sa propre couche de rendu.

Pourquoi un z-index élevé peut quand même perdre

Voici le piège central : le z-index d'un élément ne se compare qu'aux autres éléments de son propre contexte d'empilement. Si son parent a lui-même créé un contexte, par exemple avec une opacité inférieure à 1, alors la position finale de cet enfant est d'abord fixée par la place du parent dans le contexte supérieur, avant même que le z-index de l'enfant n'entre en jeu.

.parent-a {
  position: relative;
  z-index: 1;
  opacity: 0.99; /* crée un contexte d'empilement */
}

.parent-a .enfant {
  position: relative;
  z-index: 9999; /* énorme, mais piégé dans le contexte du parent */
}

.parent-b {
  position: relative;
  z-index: 2; /* passe devant tout .parent-a, quel que soit son contenu */
}

Dans cet exemple, .enfant ne pourra jamais passer devant .parent-b, quelle que soit la valeur de son z-index, parce que c'est .parent-a tout entier, avec un z-index de 1, qui est comparé à .parent-b et à son z-index de 2.

Contexte d'empilement et mise en page ne sont pas la même chose

Le contexte d'empilement ne doit pas être confondu avec un conteneur en mode flexible ou en grille, qui organise la position des éléments dans le plan de la page. Le contexte d'empilement organise, lui, leur ordre sur l'axe de profondeur, celui qui détermine ce qui est devant ou derrière. Les deux peuvent se déclencher ensemble sur le même élément, par exemple un conteneur avec un z-index qui devient aussi un contexte d'empilement, mais ce sont deux mécanismes indépendants qui répondent à des questions différentes.

Diagnostiquer un empilement qui semble illogique

Face à un élément coincé derrière un autre malgré un z-index élevé, la méthode la plus fiable consiste à remonter l'arbre des parents un par un, en cherchant celui qui porte une opacité, une transformation, un filtre ou un positionnement avec z-index. Les outils de développement des navigateurs modernes affichent souvent directement les contextes d'empilement dans leur panneau d'inspection en trois dimensions, ce qui évite de deviner.

FAQ

Non, ils sont indispensables et souvent créés volontairement, par exemple pour garantir qu'une modale reste toujours au-dessus du reste. Le problème n'est pas leur existence, mais le fait de ne pas savoir où ils se trouvent dans la page.

Oui, plusieurs propriétés créent un contexte sans le moindre positionnement, notamment une opacité inférieure à 1, une transformation, ou un filtre : le positionnement avec z-index n'est qu'un cas parmi d'autres.

Non, un z-index négatif place seulement l'élément plus bas dans l'ordre d'empilement de son propre contexte, souvent derrière l'arrière-plan de son parent, mais il reste prisonnier de ce même contexte comme n'importe quelle autre valeur.