Z-Index Inspector révèle l'ordre d'empilement complet de chaque élément d'une page web. Chaque élément possédant une valeur z-index est mis en surbrillance et étiqueté directement sur la page, et un panneau de carte des couches triées affiche toutes les couches z-index de bas en haut. Il identifie les stacking contexts créés par position, transform, opacity et d'autres propriétés CSS — rendant enfin le débogage des z-index visuel et intuitif.
Les bugs de z-index comptent parmi les problèmes les plus frustrants en CSS. Une modale qui devrait s'afficher au-dessus de tout est cachée derrière une barre latérale. Un menu déroulant disparaît derrière la section suivante. Une infobulle est invisible car un élément parent crée un stacking context inattendu. La cause profonde est presque toujours une incompréhension du fonctionnement des stacking contexts — et les DevTools du navigateur n'offrent presque aucune aide pour les visualiser. Z-Index Inspector rend l'invisible visible. Chaque élément avec un z-index explicite reçoit un overlay coloré et une étiquette affichant sa valeur. Un panneau de carte des couches triées liste toutes les valeurs z-index du bas (le plus faible) vers le haut (le plus élevé), indiquant à quelle classe CSS ou quel élément appartient chaque valeur. Plus important encore, l'outil identifie les limites des stacking contexts — les éléments qui créent de nouveaux stacking contexts via position + z-index, transform, opacity < 1, filter, will-change ou isolation. Comprendre quel ancêtre crée le stacking context est généralement la clé pour corriger les bugs de z-index.
Chaque élément avec une valeur z-index reçoit un overlay coloré semi-transparent et un badge d'étiquette affichant son numéro z-index. Les valeurs z-index élevées adoptent des couleurs chaudes (rouges), les valeurs basses des couleurs froides (bleus). La superposition visuelle rend l'ordre d'empilement immédiatement intuitif.
Un panneau latéral liste toutes les valeurs z-index trouvées sur la page, triées de la plus haute (dessus) à la plus basse (dessous). Chaque entrée affiche la valeur z-index, le sélecteur CSS ou le nom de classe, et la propriété position. Cliquez sur une entrée pour mettre en surbrillance l'élément correspondant sur la page.
Identifie chaque limite de stacking context sur la page ainsi que la propriété CSS qui le crée — position: relative/absolute avec z-index, transform, opacity < 1, filter, will-change, isolation: isolate ou contain: layout. Ces éléments sont listés séparément afin que vous puissiez comprendre pourquoi une valeur z-index ne se comporte pas comme prévu.
Cliquez sur une couche dans le panneau pour mettre en surbrillance l'élément correspondant sur la page et y accéder. Ou cliquez sur un élément mis en surbrillance sur la page pour le localiser dans le panneau de carte des couches. Naviguez dans l'ordre d'empilement dans le sens qui vous convient le mieux.
Chaque entrée de couche affiche la valeur CSS position de l'élément (static, relative, absolute, fixed, sticky), car z-index ne s'applique qu'aux éléments positionnés. Repérez les cas où z-index est défini mais position est static — un bug courant où z-index n'a aucun effet.
Pour tout élément sélectionné, consultez la chaîne complète des stacking contexts ancêtres jusqu'à la racine. Comprenez précisément quel stacking context d'ancêtre limite la portée z-index de l'élément — l'information essentielle pour la plupart des débogages de z-index.
Une modale avec z-index: 9999 est cachée derrière une barre latérale avec z-index: 10. Comment ? Z-Index Inspector montre que le parent de la modale a position: relative et crée un stacking context avec z-index: 1, tandis que le parent de la barre latérale a z-index: 2. La modale ne peut jamais s'échapper du contexte de son parent.
Un menu déroulant disparaît derrière la section suivante lorsqu'il s'ouvre. L'inspecteur révèle que le conteneur du menu a overflow: hidden (ce qui crée également un stacking context) ou que la section suivante a un z-index plus élevé. La mise en surbrillance visuelle des couches rend le chevauchement évident.
Au fil du temps, les valeurs z-index s'accumulent : 10, 100, 999, 9999, 99999. La carte des couches affiche toutes les valeurs triées, ce qui permet d'identifier facilement la plage réellement nécessaire et de la simplifier en une échelle propre (1, 2, 3, 10, 100).
Les widgets de chat, les bannières de cookies et les overlays analytiques injectent des éléments avec des valeurs z-index élevées. Z-Index Inspector indique exactement les valeurs qu'ils utilisent, vous aidant à définir vos propres valeurs z-index de manière appropriée pour éviter les conflits.
Passez en revue tous les stacking contexts de la page pour détecter ceux qui sont superflus. Les transform, filter et opacity appliqués pour des effets visuels peuvent créer par inadvertance des stacking contexts qui provoquent des problèmes de z-index ailleurs. La liste de contextes les rend tous visibles.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Z-Index Inspector. L'outil analyse la page et identifie chaque élément avec une valeur z-index ainsi que chaque limite de stacking context.
Les éléments avec des valeurs z-index reçoivent des overlays colorés directement sur la page, avec des étiquettes affichant leurs numéros z-index. Les valeurs élevées apparaissent avec des couleurs chaudes, les valeurs basses avec des couleurs froides.
Ouvrez le panneau latéral pour voir toutes les couches z-index triées de la plus haute à la plus basse. Chaque entrée affiche la valeur, le sélecteur et la propriété position. Cliquez sur une entrée pour mettre en surbrillance l'élément sur la page.
La section « Stacking Contexts » du panneau liste chaque élément qui crée un nouveau stacking context ainsi que la propriété CSS responsable. C'est généralement la clé pour comprendre les problèmes de z-index.
Cliquez sur un élément pour voir la chaîne de ses stacking contexts ancêtres — quels contextes parents affectent son ordre de rendu. Remontez la chaîne pour trouver la limite de contexte à l'origine du problème d'empilement.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
