In This Article

Avez-vous déjà défini z-index: 99999 sur un élément de votre CSS, et il ne ressort pas au-dessus des autres éléments ? Une valeur aussi grande devrait facilement placer cet élément visuellement au-dessus de tout autre élément, en supposant que tous les différents éléments sont définis à une valeur inférieure ou ne sont pas définis du tout. Une page Web est généralement représentée dans un espace bidimensionnel ; cependant, en appliquant des propriétés CSS spécifiques, un plan imaginaire sur l'axe Z est introduit pour transmettre la profondeur. Ce plan est perpendiculaire à l'écran, et depuis celui-ci, l'utilisateur perçoit l'ordre des éléments, les uns sur les autres. L’idée derrière l’axe z imaginaire, la perception qu’a l’utilisateur des éléments empilés, est que les propriétés CSS qui le créent se combinent pour former ce que nous appelons un contexte d’empilement. Nous allons parler de la façon dont les éléments sont « empilés » sur une page Web, de ce qui contrôle l’ordre d’empilement et des approches pratiques pour « dépiler » les éléments en cas de besoin. À propos des contextes d'empilement Imaginez votre page Web comme un bureau. Au fur et à mesure que vous ajoutez des éléments HTML, vous posez des morceaux de papier les uns après les autres sur le bureau. Le dernier morceau de papier placé est équivalent à l’élément HTML le plus récemment ajouté et il se trouve au-dessus de tous les autres papiers placés avant lui. Il s'agit du flux de documents normal, même pour les éléments imbriqués. Le bureau lui-même représente le contexte d'empilement racine, formé par l'élément , qui contient tous les autres dossiers. Désormais, des propriétés CSS spécifiques entrent en jeu. Les propriétés telles que la position (avec z-index), l'opacité, la transformation et le contenu) agissent comme un dossier. Ce dossier prend un élément et tous ses enfants, les extrait de la pile principale et les regroupe dans une sous-pile distincte, créant ce que nous appelons un contexte d'empilement. Pour les éléments positionnés, cela se produit lorsque nous déclarons une valeur d'index z autre que auto. Pour les propriétés telles que l'opacité, la transformation et le filtre, le contexte d'empilement est créé automatiquement lorsque des valeurs spécifiques sont appliquées.

Essayez de comprendre ceci : une fois qu'un morceau de papier (c'est-à-dire un élément enfant) se trouve dans un dossier (c'est-à-dire le contexte d'empilement du parent), il ne peut jamais sortir de ce dossier ni être placé entre des papiers dans un dossier différent. Son z-index n'est désormais pertinent que dans son propre dossier.

Dans l'illustration ci-dessous, le papier B se trouve désormais dans le contexte d'empilage du dossier B et ne peut être commandé qu'avec d'autres papiers du dossier.

Imaginez, si vous voulez, que vous ayez deux dossiers sur votre bureau :

.folder-a { z-index : 1 ; } .folder-b { z-index : 2 ; }

Mettons à jour un peu le balisage. À l'intérieur du dossier A se trouve une page spéciale, z-index : 9999. À l'intérieur du dossier B se trouve une page simple, z-index : 5.

.page spéciale { z-index : 9999 ; } .plain-page { z-index : 5 ; }

Quelle page est en haut ? Il s'agit de la page .plain dans le dossier B. Le navigateur ignore les documents enfants et empile d'abord les deux dossiers. Il voit le dossier B (z-index : 2) et le place au-dessus du dossier A (z-index : 1) car nous savons que deux est supérieur à un. Pendant ce temps, la page .special-page définie sur z-index: 9999 se trouve au bas de la pile même si son z-index est défini sur la valeur la plus élevée possible. Les contextes d'empilement peuvent également être imbriqués (dossiers dans des dossiers), créant ainsi un « arbre généalogique ». Le même principe s’applique : un enfant ne peut jamais échapper au dossier de ses parents. Maintenant que vous comprenez comment les contextes d'empilement se comportent comme des dossiers qui regroupent et réorganisent les calques, il convient de se demander : pourquoi certaines propriétés, comme la transformation et l'opacité, créent-elles de nouveaux contextes d'empilement ? Voici le problème : ces propriétés ne créent pas de contextes d’empilement en raison de leur apparence ; ils le font à cause de la façon dont le navigateur fonctionne sous le capot. Lorsque vous appliquez une transformation, une opacité, un filtre ou une perspective, vous dites au navigateur : « Hé, cet élément peut bouger, pivoter ou s'estomper, alors soyez prêt !

Lorsque vous utilisez ces propriétés, le navigateur crée un nouveau contexte d'empilement pour gérer le rendu plus efficacement. Cela permet au navigateur de gérer les animations, les transformations et les effets visuels de manière indépendante, réduisant ainsi le besoin de recalculer la manière dont ces éléments interagissent avec le reste de la page. Considérez-le comme le navigateur disant : « Je vais gérer ce dossier séparément afin de ne pas avoir à remanier tout le bureau à chaque fois que quelque chose à l'intérieur change. » Mais il y aun effet secondaire. Une fois que le navigateur place un élément dans son propre calque, il doit « aplatir » tout ce qu'il contient, créant ainsi un nouveau contexte d'empilement. C’est comme retirer un dossier du bureau pour le gérer séparément ; tout ce qui se trouve à l'intérieur de ce dossier est regroupé et le navigateur le traite désormais comme une seule unité lorsqu'il décide de ce qui se trouve au-dessus de quoi. Ainsi, même si les propriétés de transformation et d’opacité ne semblent pas affecter la façon dont les éléments s’empilent visuellement, elles le font, et c’est pour optimiser les performances. Plusieurs autres propriétés CSS peuvent également créer des contextes d'empilement pour des raisons similaires. MDN fournit une liste complète si vous souhaitez approfondir. Il y en a un bon nombre, qui illustrent seulement à quel point il est facile de créer par inadvertance un contexte d'empilement sans le savoir. Le problème du « dépilage » Des problèmes de cumul peuvent survenir pour de nombreuses raisons, mais certaines sont plus courantes que d’autres. Les composants modaux sont un modèle classique car ils nécessitent d'activer le composant pour qu'il soit « ouvert » sur une couche supérieure au-dessus de tous les autres éléments, puis de le supprimer de la couche supérieure lorsqu'il est « fermé ». Je suis presque sûr que nous avons tous été confrontés à une situation où nous ouvrons un modal et, pour une raison quelconque, il n'apparaît pas. Ce n’est pas qu’il ne s’est pas ouvert correctement, mais qu’il est hors de vue dans une couche inférieure du contexte d’empilement. Cela vous amène à vous demander « pourquoi ? » puisque vous avez défini :

.superposition { poste : fixe ; /* crée le contexte d'empilement */ indice z : 1 ; /* place l'élément sur un calque au-dessus de tout le reste */ encart : 0 ; largeur : 100 % ; hauteur : 100vh ; débordement : caché ; couleur d'arrière-plan : #00000080 ; }

Cela semble correct, mais si l'élément parent contenant le déclencheur modal est un élément enfant au sein d'un autre élément parent également défini sur z-index : 1, cela place techniquement le modal dans une sous-couche masquée par le dossier principal. Examinons ce scénario spécifique et quelques autres pièges courants liés au contexte d'empilement. Je pense que vous verrez non seulement à quel point il est facile de créer par inadvertance des contextes d’empilement, mais aussi comment les gérer mal. De plus, la manière dont vous revenez à un état géré dépend de la situation. Scénario 1 : Le modal piégé

Vous pouvez immédiatement voir votre modal piégé dans une couche de bas niveau et identifier le parent. Extensions de navigateur Les développeurs intelligents ont créé des extensions pour vous aider. Des outils comme cette extension Chrome « CSS Stacking Context Inspector » ajoutent un onglet z-index supplémentaire à vos DevTools pour vous montrer des informations sur les éléments qui créent un contexte d'empilement.

Extensions de l'EDI Vous pouvez même repérer des problèmes pendant le développement avec une extension comme celle-ci pour VS Code, qui met en évidence les problèmes potentiels de contexte d'empilement directement dans votre éditeur.

Dépiler et reprendre le contrôle Une fois que nous avons identifié la cause profonde, l’étape suivante consiste à y remédier. Il existe plusieurs approches que vous pouvez adopter pour résoudre ce problème, et je les énumérerai dans l’ordre. Cependant, vous pouvez choisir n’importe qui à n’importe quel niveau ; personne ne peut se plaindre ou gêner un autre. Changer la structure HTML Ceci est considéré comme la solution optimale. Pour que vous rencontriez un problème de contexte d'empilement, vous devez avoir placé certains éléments dans des positions amusantes dans votre code HTML. La restructuration de la page vous aidera à remodeler le DOM et à éliminer le problème de contexte d'empilement. Recherchez l'élément problématique et supprimez-le de l'élément de recouvrement dans le balisage HTML. Par exemple, nous pouvons résoudre le premier scénario, « The Trapped Modal », en déplaçant le conteneur .modal hors de l'en-tête et en le plaçant seul dans l'élément .

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw