Z-Index Inspector onthult de complete stapelvolgorde van elk element op een webpagina. Elk element met een z-index-waarde is gemarkeerd en gelabeld rechtstreeks op de pagina, en een gesorteerd lagenkaartpaneel toont alle z-index-lagen van onder naar boven. Identificeert gestapelde contexten die zijn gemaakt door positie, transformatie, dekking en andere CSS-eigenschappen — wat z-index-debugging eindelijk visueel en intuïtief maakt.
Z-index-bugs zijn enkele van de meest frustrerende problemen in CSS. Een modal dat boven alles moet verschijnen, wordt verborgen achter een zijbalk. Een dropdown-menu verdwijnt achter de volgende sectie. Een tooltip is onzichtbaar omdat een ouder element een onverwachte gestapelde context creëert. De oorzaak is bijna altijd een misverstand over hoe gestapelde contexten werken — en browsertools voor ontwikkelaars geven u bijna geen hulp bij het visualiseren ervan. Z-Index Inspector maakt het onzichtbare zichtbaar. Elk element met een expliciete z-index krijgt een gekleurde overlay en een label met de waarde ervan. Een gesorteerd lagenkaartpaneel geeft alle z-index-waarden weer van onder (laagste) naar boven (hoogste), met de CSS-klasse of element waarvan elke waarde afkomstig is. Het allerbelangrijkste is dat het gereedschap gestapelde contextgrenzen identificeert — elementen die nieuwe gestapelde contexten maken via positie + z-index, transformatie, dekking < 1, filter, will-change of isolatie. Als u begrijpt welke voorouder de gestapelde context creëert, is dit meestal de sleutel tot het repareren van z-index-bugs.
Elk element met een z-index-waarde krijgt een semi-transparante gekleurde overlay en een labelbadge met het z-index-getal. Hogere z-index-waarden krijgen warmere kleuren (rood), lagere waarden krijgen koelere kleuren (blauw). De visuele laagwerking maakt de stapelvolgorde onmiddellijk intuïtief.
Een zijpaneel geeft alle z-index-waarden op de pagina weer, gesorteerd van hoogste (top) naar laagste (onder). Elke invoer toont de z-index-waarde, de CSS-selector of klassenaam en de positie-eigenschap. Klik op een invoer om het bijbehorende element op de pagina te markeren.
Identificeert elke gestapelde contextgrens op de pagina en de CSS-eigenschap die deze creëert — positie: relatief/absoluut met z-index, transformatie, dekking < 1, filter, will-change, isolatie: isoleren of inhoud: indeling. Deze worden afzonderlijk weergegeven, zodat u kunt traceren waarom een z-index-waarde zich niet naar verwachting gedraagt.
Klik op een laag in het paneel om het bijbehorende element op de pagina te markeren en naar te scrollen. Of klik op een gemarkeerd element op de pagina om het in het lagenkaartpaneel te vinden. Navigeer in de stapelvolgorde in welke richting u wilt.
Elke laaginvoer toont de CSS-positiewaarde van het element (statisch, relatief, absoluut, vast, plakkerig), omdat z-index alleen van toepassing is op gepositioneerde elementen. Vind gevallen waarin z-index is ingesteld, maar positie is statisch — een veelgebruikte bug waarbij z-index geen effect heeft.
Zie voor elk geselecteerd element de complete keten van voorkokerstapelde contexten tot aan de root. Begrijp precies welke voorkokerstapelde context het bereik van de z-index van het element beperkt — het inzicht dat sleutelsteuning is voor de meeste z-index-debugging.
Een modal met z-index: 9999 wordt verborgen achter een zijbalk met z-index: 10. Hoe kan dat? Z-Index Inspector toont dat de modal van de parent positie heeft: relatief en creëert een gestapelde context met z-index: 1, terwijl de parent van de zijbalk z-index: 2 heeft. De modal kan nooit uit de context van de parent ontsnappen.
Een dropdown-menu verdwijnt achter de volgende sectie wanneer deze wordt geopend. De inspector onthult dat de container van het menu overflow: hidden heeft (wat ook een gestapelde context creëert) of dat de volgende sectie een hogere z-index heeft. Visuele lagemarkeringen maken de overlapping duidelijk.
In de loop van de tijd stapelen z-index-waarden zich op: 10, 100, 999, 9999, 99999. De lagenkaart toont alle waarden gesorteerd, waardoor u gemakkelijk het werkelijke bereik kunt bepalen en in een schoon bereik (1, 2, 3, 10, 100) kunt vereenvoudigen.
Chatwidgets, cookiebannersafbeeldingen en analyticsoverlays voegen elementen in met hoge z-index-waarden. Z-Index Inspector toont precies welke waarden zij gebruiken, waardoor u uw eigen z-index-waarden op de juiste manier kunt instellen om conflicten te vermijden.
Controleer alle gestapelde contexten op de pagina om te controleren op onnodige contexten. Transforms, filters en dekking die voor visuele effecten worden toegepast, kunnen per ongeluk gestapelde contexten creëren die z-index-problemen elders veroorzaken. De contextlijst maakt ze allemaal zichtbaar.
Open het floating dock van DevSuite Pro en klik op het Z-Index Inspector-pictogram. Het gereedschap scant de pagina en identificeert elk element met een z-index-waarde en elke gestapelde contextgrens.
Elementen met z-index-waarden krijgen gekleurde overlays rechtstreeks op de pagina, met labels die hun z-index-nummers tonen. Hogere waarden verschijnen met warmere kleuren, lagere waarden met koelere kleuren.
Open het zijpaneel om alle z-index-lagen te zien, gesorteerd van hoogste naar laagste. Elke invoer toont de waarde, selector en positie-eigenschap. Klik op een invoer om het element op de pagina te markeren.
De sectie "Gestapelde contexten" van het paneel geeft elk element weer dat een nieuwe gestapelde context creëert en de verantwoordelijke CSS-eigenschap. Dit is meestal de sleutel tot het begrijpen van z-index-problemen.
Klik op een element om zijn voorkokerstapelde contextenketen te zien — welke voorkokerscontexten zijn renderingsvolgorde beïnvloeden. Volg de keten omhoog om de contextgrens te vinden die het stapelprobleem veroorzaakt.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
