CSS Academy · Leçon

Z-index et contexte d’empilement

Contrôlez quels éléments apparaissent au premier plan avec z-index et comprenez les contextes d’empilement.

Z-index et contexte d’empilement est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Qu’est-ce que z-index ?

z-index contrôle l’ordre d’empilement des éléments positionnés sur l’axe Z (de l’avant vers l’arrière). Lorsque des éléments se chevauchent, les valeurs élevées apparaissent au-dessus des valeurs faibles.

z-index ne fonctionne que sur les éléments positionnés

z-index n'a aucun effet sur les éléments dont position: static est définie (valeur par défaut). Vous devez utiliser relative, absolute, fixed ou sticky pour que z-index s'applique.

<div class="popup">Popup (position + z-index)</div>

Ordre d'empilement par défaut

Sans z-index explicite, les éléments s'empilent dans cet ordre (de l'arrière vers l'avant) :

Arrière-plan de l'élément racine
Éléments de niveau bloc (dans l'ordre du flux)
Éléments flottants
Éléments en ligne
Éléments positionnés avec z-index: auto ou 0

Contexte d'empilement

Un contexte d'empilement est une couche d'éléments partageant un axe z commun. Les valeurs de z-index n'entrent en concurrence qu'au sein d'un même contexte d'empilement. Un élément situé dans un contexte d'empilement ne peut pas être placé au-dessus d'éléments situés à l'extérieur de celui-ci, quelle que soit sa valeur de z-index.

Qu'est-ce qui crée un contexte d'empilement ?

Un nouveau contexte d'empilement est créé par :

position + z-index différent de auto
opacity inférieure à 1
transform, filter ou perspective appliqué
will-change sur des propriétés spécifiques
isolation: isolate
Éléments enfants flex ou de grille avec z-index

Isolation du contexte d'empilement

Utilisez isolation: isolate pour créer intentionnellement un contexte d'empilement sans aucun effet visuel secondaire. C'est utile pour les composants d'interface qui doivent contenir leurs propres couches de z-index.

<div class="modal-wrapper">Isolated stacking context</div>

Le problème de l'échelle de z-index

Les projets souffrent souvent de « guerres de z-index », où les développeurs rivalisent en augmentant les valeurs jusqu'à 9999 ou 99999. Résolvez ce problème avec une échelle de z-index nommée utilisant des variables CSS :

<p>Custom properties define a z-index scale used across the app.</p>

z-index négatif

Les valeurs négatives de z-index placent les éléments derrière l'arrière-plan du bloc conteneur. Cela peut servir à placer des couches d'éléments pseudo-décoratifs derrière le contenu.

<div class="card">Card with a decorative gradient layer behind it</div>

Déboguer les problèmes d'empilement

Lorsqu'une fenêtre modale ou une infobulle apparaît derrière un autre élément, le responsable est généralement un contexte d'empilement sur un ancêtre avec un z-index faible. Utilisez la vue 3D de DevTools ou vérifiez l'opacité, la transformation et le filtre des éléments parents.

z-index avec Flex et Grid

Les éléments flex et de grille peuvent utiliser z-index directement sans définir explicitement position. Le navigateur les traite comme des éléments positionnés pour l'empilement.

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

Fenêtres modales fixes et z-index

Les fenêtres modales doivent être des enfants directs de <body> (ou d'un conteneur de niveau supérieur) pour échapper aux contextes d'empilement de leurs ancêtres. L'élément HTML <dialog> gère cela nativement dans la couche supérieure du navigateur.

Vérification rapide

Deux éléments qui se chevauchent ont tous deux z-index: 100, mais dans des contextes d'empilement parents différents. Qu'est-ce qui détermine lequel apparaît au-dessus ?

Récapitulatif

z-index contrôle l'empilement d'avant en arrière des éléments positionnés. Les contextes d'empilement isolent la concurrence entre les valeurs de z-index. Tout ce qui crée un contexte d'empilement sur un parent peut bloquer les valeurs de z-index de ses enfants. Utilisez isolation: isolate pour créer des limites explicites et des variables CSS pour définir une échelle de z-index.

Questions Fréquemment Posées

La leçon « Z-index et contexte d’empilement » est-elle gratuite ?

Oui — le texte complet de « Z-index et contexte d’empilement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Z-index et contexte d’empilement » ?

Contrôlez quels éléments apparaissent au premier plan avec z-index et comprenez les contextes d’empilement. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Z-index et contexte d’empilement » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à CSS Academy