Inspektor Z-indexu odhaluje kompletní pořadí skládání každého elementu na webové stránce. Každý element s hodnotou z-index je přímo na stránce zvýrazněn a označen a seřazený panel mapy vrstev zobrazuje všechny vrstvy z-index od spodní po horní. Identifikuje skládací kontexty vytvořené pomocí position, transform, opacity a dalších CSS vlastností — konečně učiní ladění z-index vizuálním a intuitivním.
Chyby z-index patří k nejfrustrujícím problémům v CSS. Modální okno, které by se mělo zobrazit nade vším, je skryto za postranním panelem. Rozbalovací nabídka zmizí za další sekcí. Popis je neviditelný, protože nadřazený element vytváří neočekávaný skládací kontext. Hlavní příčinou je téměř vždy nepochopení toho, jak skládací kontexty fungují — a DevTools prohlížeče vám s jejich vizualizací téměř nepomáhají. Inspektor Z-indexu učiní neviditelné viditelným. Každý element s explicitním z-index dostane barevný překryv a popisek zobrazující jeho hodnotu. Seřazený panel mapy vrstev uvádí všechny hodnoty z-index od spodní (nejnižší) po horní (nejvyšší) a ukazuje, ke které CSS třídě nebo elementu každá hodnota patří. Nejdůležitější je, že nástroj identifikuje hranice skládacích kontextů — elementy, které vytvářejí nové skládací kontexty prostřednictvím position + z-index, transform, opacity < 1, filter, will-change nebo isolation. Pochopení toho, který předek vytváří skládací kontext, je obvykle klíčem k opravě chyb z-index.
Každý element s hodnotou z-index dostane poloprůhledný barevný překryv a odznak s popiskem zobrazující číslo z-index. Vyšší hodnoty z-index dostávají teplejší barvy (červené), nižší hodnoty chladnější barvy (modré). Vizuální vrstvení okamžitě zjednodušuje pochopení pořadí skládání.
Boční panel uvádí všechny hodnoty z-index nalezené na stránce, seřazené od nejvyšší (nahoře) po nejnižší (dole). Každá položka zobrazuje hodnotu z-index, CSS selektor nebo název třídy a vlastnost position. Kliknutím na libovolnou položku zvýrazníte odpovídající element na stránce.
Identifikuje každou hranici skládacího kontextu na stránce a CSS vlastnost, která ji vytváří — position: relative/absolute s z-index, transform, opacity < 1, filter, will-change, isolation: isolate nebo contain: layout. Tyto jsou uvedeny odděleně, abyste mohli sledovat, proč se hodnota z-index nechová podle očekávání.
Kliknutím na libovolnou vrstvu v panelu zvýrazníte a přejdete k odpovídajícímu elementu na stránce. Nebo klikněte na libovolný zvýrazněný element na stránce a najděte ho v panelu mapy vrstev. Procházejte pořadí skládání v libovolném přirozeném směru.
Každá položka vrstvy zobrazuje CSS hodnotu position elementu (static, relative, absolute, fixed, sticky), protože z-index se vztahuje pouze na pozicované elementy. Odhalte případy, kdy je z-index nastaven, ale position je static — běžná chyba, kdy z-index nemá žádný účinek.
Pro libovolný vybraný element uvidíte kompletní řetězec předcházejících skládacích kontextů až ke kořeni. Přesně pochopte, který předchůdce omezuje rozsah z-index elementu — klíčový poznatek pro ladění většiny problémů s z-index.
Modální okno s z-index: 9999 je skryto za postranním panelem s z-index: 10. Jak? Inspektor Z-indexu ukazuje, že nadřazený prvek modálního okna má position: relative a vytváří skládací kontext s z-index: 1, zatímco nadřazený prvek postranního panelu má z-index: 2. Modální okno nemůže nikdy uniknout z kontextu svého nadřazeného prvku.
Rozbalovací nabídka při otevření zmizí za další sekcí. Inspektor odhalí, že kontejner nabídky má overflow: hidden (což také vytváří skládací kontext) nebo že další sekce má vyšší z-index. Vizuální zvýrazňování vrstev činí překrytí zřejmým.
Postupem času se hodnoty z-index hromadí: 10, 100, 999, 9999, 99999. Mapa vrstev zobrazuje všechny seřazené hodnoty, takže je snadné identifikovat skutečně potřebný rozsah a zjednodušit na čistou škálu (1, 2, 3, 10, 100).
Chat widgety, bannery souborů cookie a analytické překryvy vkládají elementy s vysokými hodnotami z-index. Inspektor Z-indexu zobrazuje přesně jaké hodnoty používají, což vám pomáhá nastavit vlastní hodnoty z-index vhodně pro vyhnutí se konfliktům.
Zkontrolujte všechny skládací kontexty na stránce pro nalezení zbytečných. Transformace, filtry a opacity aplikované pro vizuální efekty mohou neúmyslně vytvářet skládací kontexty způsobující problémy s z-index jinde. Seznam kontextů je všechny zviditelní.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Inspektoru Z-indexu. Nástroj prohledá stránku a identifikuje každý element s hodnotou z-index a každou hranici skládacího kontextu.
Elementy s hodnotami z-index dostávají barevné překryvy přímo na stránce s popisky zobrazujícími jejich čísla z-index. Vyšší hodnoty se zobrazují teplejšími barvami, nižší hodnoty chladnějšími barvami.
Otevřete boční panel pro zobrazení všech vrstev z-index seřazených od nejvyšší po nejnižší. Každá položka zobrazuje hodnotu, selektor a vlastnost position. Kliknutím na libovolnou položku zvýrazníte element na stránce.
Sekce Skládací kontexty v panelu uvádí každý element, který vytváří nový skládací kontext, a odpovědnou CSS vlastnost. To je obvykle klíčem k pochopení problémů s z-index.
Kliknutím na libovolný element uvidíte jeho řetězec předcházejících skládacích kontextů — které nadřazené kontexty ovlivňují jeho pořadí vykreslování. Sledujte řetězec směrem nahoru pro nalezení hranice kontextu způsobující problém se skládáním.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
