Comment fonctionnent z-index et les contextes d'empilement ?

Question

IT Interview Practice · Accepted Answer

`z-index` contrôle l'ordre d'empilement **avant-arrière** des éléments qui se chevauchent — les valeurs plus élevées sont au-dessus. Mais il ne fonctionne que sur les éléments **positionnés**, et il opère *au sein* d'un **contexte d'empilement**, ce qui est la source de la plupart des confusions avec z-index.

```css
.modal   { position: fixed; z-index: 100; }   /* on top */
.overlay { position: fixed; z-index: 99; }    /* just below */
.content { position: relative; z-index: 1; }
```

`z-index` est **ignoré** sur `position: static` (la valeur par défaut) — l'élément doit être `relative`, `absolute`, `fixed`, ou `sticky` pour que cela s'applique.

## Pourquoi c'est important

Un contexte d'empilement est une « couche » autonome. Les valeurs `z-index` ne concourent **que dans le même contexte** — un enfant ne peut *jamais* échapper au niveau d'empilement de son parent, peu importe sa valeur z-index.

```css
.parent-a { position: relative; z-index: 1; }
.parent-b { position: relative; z-index: 2; }

.child-of-a { position: absolute; z-index: 9999; }
/* ❌ child-of-a STILL renders below everything in parent-b, */
/*    because parent-a (z-index 1) is entirely below parent-b (z-index 2). */
```

C'est le bug classique « ma modale z-index: 9999 est toujours derrière quelque chose » — la modale est piégée à l'intérieur d'un parent qui est sur une couche inférieure.

## Ce qui crée un nouveau contexte d'empilement

De nombreuses propriétés en créent un silencieusement, ce qui peut piéger les descendants :

```text
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
```

## La solution

```css
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
```

En pratique, rendez les modales/infobulle en haut du DOM (portails React) pour qu'elles ne soient pas piégées dans un parent sur une couche inférieure.

## Pourquoi c'est important

Les contextes d'empilement expliquent les bugs z-index les plus déroutants : un énorme z-index qui perd quand même parce que son ancêtre est sur une couche inférieure.

Savoir que `opacity`, `transform`, et le z-index positionné créent des contextes — et que les enfants ne peuvent pas les échapper — vous permet de déboguer l'ordre des superpositions/menus déroulants et de structurer votre DOM (portails) correctement.

Pourquoi c'est important

Ce qui crée un nouveau contexte d'empilement

La solution

Pourquoi c'est important

Questions connexes