Inspektor Z-Index ujawnia kompletną kolejność stosu każdego elementu na stronie. Każdy element z wartością z-index jest podświetlony i oznaczony bezpośrednio na stronie, a posortowany panel mapy warstw pokazuje wszystkie warstwy z-index od dołu do góry. Identyfikuje konteksty stosu tworzone przez position, transform, opacity i inne właściwości CSS — w końcu sprawiając, że debugowanie z-index jest wizualne i intuicyjne.
Błędy z-index są jednymi z najbardziej frustrujących problemów w CSS. Modal, który powinien pojawić się nad wszystkim, jest ukryty za paskiem bocznym. Menu rozwijane znika za następną sekcją. Tooltip jest niewidoczny, ponieważ nadrzędny element tworzy nieoczekiwany kontekst stosu. Główną przyczyną jest prawie zawsze nieporozumienie dotyczące działania kontekstów stosu — a DevTools przeglądarki nie dają prawie żadnej pomocy w ich wizualizacji. Inspektor Z-Index sprawia, że niewidoczne staje się widoczne. Każdy element z jawnym z-index otrzymuje kolorową nakładkę i etykietę pokazującą swoją wartość. Posortowany panel mapy warstw wymienia wszystkie wartości z-index od dołu (najniższa) do góry (najwyższa), pokazując, do której klasy CSS lub elementu należy każda wartość. Co najważniejsze, narzędzie identyfikuje granice kontekstu stosu — elementy, które tworzą nowe konteksty stosu przez position + z-index, transform, opacity < 1, filter, will-change lub isolation. Zrozumienie, który przodek tworzy kontekst stosu, jest zwykle kluczem do naprawienia błędów z-index.
Każdy element z wartością z-index otrzymuje półprzezroczystą kolorową nakładkę i znaczek etykiety pokazujący jego numer z-index. Wyższe wartości z-index otrzymują cieplejsze kolory (czerwienie), niższe wartości chłodniejsze kolory (błękity). Wizualne nawarstwianie sprawia, że kolejność stosu jest natychmiast intuicyjna.
Panel boczny wymienia wszystkie wartości z-index znalezione na stronie, posortowane od najwyższej (góra) do najniższej (dół). Każdy wpis pokazuje wartość z-index, selektor CSS lub nazwę klasy oraz właściwość position. Kliknij dowolny wpis, aby podświetlić odpowiadający element na stronie.
Identyfikuje każdą granicę kontekstu stosu na stronie i właściwość CSS, która go tworzy — position: relative/absolute z z-index, transform, opacity < 1, filter, will-change, isolation: isolate lub contain: layout. Są one wymienione oddzielnie, dzięki czemu możesz prześledzić, dlaczego wartość z-index nie zachowuje się zgodnie z oczekiwaniami.
Kliknij dowolną warstwę w panelu, aby podświetlić i przewinąć do odpowiadającego elementu na stronie. Lub kliknij dowolny podświetlony element na stronie, aby zlokalizować go w panelu mapy warstw. Poruszaj się po kolejności stosu w dowolnym naturalnym kierunku.
Każdy wpis warstwy pokazuje wartość position elementu CSS (static, relative, absolute, fixed, sticky), ponieważ z-index dotyczy tylko elementów pozycjonowanych. Wykryj przypadki, gdzie z-index jest ustawiony, ale position jest static — powszechny błąd, w którym z-index nie ma efektu.
Dla dowolnego wybranego elementu zobacz kompletny łańcuch kontekstów stosu przodków aż do korzenia. Zrozum dokładnie, który kontekst stosu przodka ogranicza zakres z-index elementu — kluczowa wiedza dla większości debugowania z-index.
Modal z z-index: 9999 jest ukryty za paskiem bocznym z z-index: 10. Jak? Inspektor Z-Index pokazuje, że rodzic modalu ma position: relative i tworzy kontekst stosu z z-index: 1, podczas gdy rodzic paska bocznego ma z-index: 2. Modal nigdy nie może uciec z kontekstu swojego rodzica.
Menu rozwijane znika za następną sekcją po otwarciu. Inspektor ujawnia, że kontener menu ma overflow: hidden (który również tworzy kontekst stosu) lub że następna sekcja ma wyższy z-index. Wizualne podświetlanie warstw sprawia, że nakładanie jest oczywiste.
Z czasem wartości z-index się kumulują: 10, 100, 999, 9999, 99999. Mapa warstw pokazuje wszystkie wartości posortowane, ułatwiając identyfikację faktycznie potrzebnego zakresu i uproszczenie do czystej skali (1, 2, 3, 10, 100).
Widżety czatu, banery cookies i nakładki analityczne wstrzykują elementy z wysokimi wartościami z-index. Inspektor Z-Index pokazuje dokładnie, jakie wartości używają, pomagając odpowiednio ustawić własne wartości z-index, aby uniknąć konfliktów.
Przejrzyj wszystkie konteksty stosu na stronie, aby sprawdzić niepotrzebne. Transform, filter i opacity zastosowane dla efektów wizualnych mogą nieumyślnie tworzyć konteksty stosu, które powodują problemy z-index gdzie indziej. Lista kontekstów czyni je wszystkie widocznymi.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Inspektora Z-Index. Narzędzie skanuje stronę i identyfikuje każdy element z wartością z-index oraz każdą granicę kontekstu stosu.
Elementy z wartościami z-index otrzymują kolorowe nakładki bezpośrednio na stronie, z etykietami pokazującymi ich numery z-index. Wyższe wartości pojawiają się z cieplejszymi kolorami, niższe z chłodniejszymi.
Otwórz panel boczny, aby zobaczyć wszystkie warstwy z-index posortowane od najwyższej do najniższej. Każdy wpis pokazuje wartość, selektor i właściwość position. Kliknij dowolny wpis, aby podświetlić element na stronie.
Sekcja panelu "Konteksty stosu" wymienia każdy element, który tworzy nowy kontekst stosu, i odpowiedzialną właściwość CSS. To zwykle klucz do zrozumienia problemów z z-index.
Kliknij dowolny element, aby zobaczyć łańcuch kontekstu stosu przodków — które nadrzędne konteksty wpływają na jego kolejność renderowania. Podążaj za łańcuchem w górę, aby znaleźć granicę kontekstu powodującą problem ze stosem.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
