Z-indeks-inspektor afslører den komplette stacking-rækkefølge for hvert element på en webside. Hvert element med en z-indeks-værdi fremhæves og mærkes direkte på siden, og et sorteret lagkortsPanel viser alle z-indeks-lag fra bund til top. Identificerer stacking-kontekster oprettet af position, transform, opacity og andre CSS-egenskaber — endelig gør z-indeks-fejlfinding visuel og intuitiv.
Z-indeks-fejl er nogle af de mest frustrerende problemer i CSS. En modal, der skal vises over alt, er skjult bag en sidebar. En dropdown-menu forsvinder bag den næste sektion. Et tooltip er usynligt, fordi et overordnet element opretter en uventet stacking-kontekst. Grundårsagen er næsten altid en misforståelse af, hvordan stacking-kontekster fungerer — og browser-DevTools giver næsten ingen hjælp til at visualisere dem. Z-indeks-inspektor gør det usynlige synligt. Hvert element med et eksplicit z-indeks får et farvet overlay og en etiket, der viser dets værdi. Et sorteret lagkortspanel viser alle z-indeks-værdier fra bund (laveste) til top (højeste) og viser, hvilken CSS-klasse eller element hver værdi tilhører. Vigtigst af alt identificerer værktøjet stacking-kontekstgrænser — elementer, der opretter nye stacking-kontekster via position + z-indeks, transform, opacity < 1, filter, will-change eller isolation. At forstå, hvilken aner der opretter stacking-konteksten, er normalt nøglen til at løse z-indeks-fejl.
Hvert element med en z-indeks-værdi får et semitransparent farvet overlay og et etiketmærke, der viser dets z-indeks-tal. Højere z-indeks-værdier får varmere farver (røde), lavere værdier får koldere farver (blå). Den visuelle lagdeling gør stacking-rækkefølgen umiddelbart intuitiv.
Et sidepanel viser alle z-indeks-værdier fundet på siden, sorteret fra højeste (top) til laveste (bund). Hver post viser z-indeks-værdien, CSS-selektoren eller klassenavnet og position-egenskaben. Klik på en post for at fremhæve det tilsvarende element på siden.
Identificerer hver stacking-kontekstgrænse på siden og den CSS-egenskab, der opretter den — position: relative/absolute med z-indeks, transform, opacity < 1, filter, will-change, isolation: isolate eller contain: layout. Disse vises separat, så du kan spore, hvorfor en z-indeks-værdi ikke opfører sig som forventet.
Klik på et lag i panelet for at fremhæve og rulle til det tilsvarende element på siden. Eller klik på et fremhævet element på siden for at finde det i lagkortspanelet. Naviger i stacking-rækkefølgen i den retning, der er naturlig.
Hver lagpost viser elementets CSS position-værdi (static, relative, absolute, fixed, sticky), da z-indeks kun gælder for positionerede elementer. Spot tilfælde, hvor z-indeks er sat, men position er static — en almindelig fejl, hvor z-indeks ikke har nogen effekt.
For et valgt element, se den komplette kæde af forældre-stacking-kontekster op til roden. Forstå præcis, hvilken aners stacking-kontekst der begrænser elementets z-indeks-omfang — den vigtigste indsigt for de fleste z-indeks-fejlretninger.
En modal med z-indeks: 9999 er skjult bag en sidebar med z-indeks: 10. Hvordan? Z-indeks-inspektor viser, at modalens overordnede har position: relative og opretter en stacking-kontekst med z-indeks: 1, mens sidebarens overordnede har z-indeks: 2. Modalen kan aldrig undslippe sin overordnedes kontekst.
En dropdown-menu forsvinder bag den næste sektion, når den åbnes. Inspektoren afslører, at menuens beholder har overflow: hidden (som også opretter en stacking-kontekst) eller at den næste sektion har et højere z-indeks. Visuel laghøjlysning gør overlapningen tydelig.
Over tid akkumulerer z-indeks-værdier: 10, 100, 999, 9999, 99999. Lagkortet viser alle værdier sorteret, hvilket gør det nemt at identificere det faktisk nødvendige interval og forenkle til en ren skala (1, 2, 3, 10, 100).
Chat-widgets, cookie-bannere og analyseover-lays injicerer elementer med høje z-indeks-værdier. Z-indeks-inspektor viser præcis, hvilke værdier de bruger, og hjælper dig med at indstille dine egne z-indeks-værdier passende for at undgå konflikter.
Gennemse alle stacking-kontekster på siden for at kontrollere for unødvendige. Transforms, filtre og opacity anvendt til visuelle effekter kan utilsigtet oprette stacking-kontekster, der forårsager z-indeks-problemer andetsteds. Kontekstlisten gør dem alle synlige.
Åbn den flydende DevSuite Pro-dock, og klik på Z-indeks-inspektor-ikonet. Værktøjet scanner siden og identificerer hvert element med en z-indeks-værdi og hver stacking-kontekstgrænse.
Elementer med z-indeks-værdier får farvede overlays direkte på siden med etiketter, der viser deres z-indeks-tal. Højere værdier vises med varmere farver, lavere værdier med koldere farver.
Åbn sidepanelet for at se alle z-indeks-lag sorteret fra højeste til laveste. Hver post viser værdien, selektoren og position-egenskaben. Klik på en post for at fremhæve elementet på siden.
Paneleets Stacking-kontekster-sektion viser hvert element, der opretter en ny stacking-kontekst, og den ansvarlige CSS-egenskab. Dette er normalt nøglen til at forstå z-indeks-problemer.
Klik på et element for at se dets forældre-stacking-kontekstkæde — hvilke overordnede kontekster påvirker dets gengivelsesrækkefølge. Følg kæden opad for at finde den kontekstgrænse, der forårsager stacking-problemet.
Installer DevSuite Pro gratis og lås op for 39+ udviklerværktøjer til din browser.
