Z-Index Inspector otkriva potpuni redoslijed slaganja svakog elementa na web stranici. Svaki element s z-index vrijednošću označen je i obilježen izravno na stranici, a sortirani panel karte slojeva prikazuje sve z-index slojeve od dna prema vrhu. Prepoznaje stacking contexts stvorene pomoću position, transform, opacity i drugih CSS svojstava — napokon čineći z-index dijagnostiku vizualnom i intuitivnom.
Z-index greške neke su od najfrustrirajućih problema u CSS-u. Modal koji bi trebao biti prikazan iznad svega skriven je iza bočne trake. Padajući izbornik nestaje iza sljedećeg odjeljka. Tooltip je nevidljiv jer nadređeni element stvara neočekivani stacking context. Temeljni uzrok gotovo uvijek leži u nerazumijevanju načina rada stacking contexts — a DevTools preglednika gotovo uopće ne pomažu pri njihovoj vizualizaciji. Z-Index Inspector čini nevidljivo vidljivim. Svaki element s eksplicitnim z-index dobiva obojeni prekrivač i oznaku s vrijednošću. Sortirani panel karte slojeva navodi sve z-index vrijednosti od dna (najniže) do vrha (najviše), prikazujući kojoj CSS klasi ili elementu svaka vrijednost pripada. Najvažnije je to što alat prepoznaje granice stacking contexts — elemente koji stvaraju nove stacking contexts putem position + z-index, transform, opacity < 1, filter, will-change ili isolation. Razumijevanje koji predak stvara stacking context obično je ključ za rješavanje z-index grešaka.
Svaki element s z-index vrijednošću dobiva poluprozirni obojeni prekrivač i oznaku koja prikazuje njegov z-index broj. Više z-index vrijednosti dobivaju toplije boje (crvene), niže vrijednosti hladnije boje (plave). Vizualno slaganje čini redoslijed slaganja odmah intuitivnim.
Bočni panel navodi sve z-index vrijednosti pronađene na stranici, sortirane od najveće (vrh) do najmanje (dno). Svaki unos prikazuje z-index vrijednost, CSS selektor ili naziv klase i position svojstvo. Kliknite bilo koji unos kako biste označili odgovarajući element na stranici.
Prepoznaje svaku granicu stacking context na stranici i CSS svojstvo koje je stvara — position: relative/absolute sa z-index, transform, opacity < 1, filter, will-change, isolation: isolate ili contain: layout. Oni su navedeni zasebno kako biste mogli pratiti zašto se z-index vrijednost ne ponaša prema očekivanjima.
Kliknite bilo koji sloj u panelu kako biste označili i pomakli prikaz na odgovarajući element na stranici. Ili kliknite bilo koji označeni element na stranici kako biste ga pronašli u panelu karte slojeva. Navigirajte redoslijedom slaganja u smjeru koji vam je prirodan.
Svaki unos sloja prikazuje CSS position vrijednost elementa (static, relative, absolute, fixed, sticky) budući da z-index vrijedi samo za pozicionirane elemente. Uočite slučajeve gdje je z-index postavljen, ali position je static — česta greška pri kojoj z-index nema učinka.
Za bilo koji odabrani element pogledajte potpuni lanac nadređenih stacking contexts sve do korijena. Točno razumijte koji stacking context pretka ograničava opseg z-index elementa — ključni uvid za većinu z-index dijagnostika.
Modal s z-index: 9999 skriven je iza bočne trake s z-index: 10. Zašto? Z-Index Inspector pokazuje da nadređeni element modala ima position: relative i stvara stacking context s z-index: 1, dok nadređeni element bočne trake ima z-index: 2. Modal nikad ne može izaći iz context svog pretka.
Padajući izbornik nestaje iza sljedećeg odjeljka pri otvaranju. Inspector otkriva da kontejner izbornika ima overflow: hidden (koji također stvara stacking context) ili da sljedeći odjeljak ima veći z-index. Vizualno isticanje slojeva čini preklapanje očitim.
Kroz vrijeme z-index vrijednosti se nakupljaju: 10, 100, 999, 9999, 99999. Karta slojeva prikazuje sve vrijednosti sortirano, olakšavajući prepoznavanje stvarnog potrebnog raspona i pojednostavljivanje na čistu skalu (1, 2, 3, 10, 100).
Chat widgeti, banneri kolačića i analitički prekrivači ubacuju elemente s visokim z-index vrijednostima. Z-Index Inspector prikazuje točno koje vrijednosti koriste, pomažući vam da ispravno postavite vlastite z-index vrijednosti i izbjegnete sukobe.
Pregledajte sve stacking contexts na stranici kako biste provjerili postoje li nepotrebni. Transforms, filters i opacity primijenjeni za vizualne efekte mogu nenamjerno stvarati stacking contexts koji uzrokuju z-index probleme na drugim mjestima. Popis contexts čini ih sve vidljivima.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Z-Index Inspector. Alat skenira stranicu i prepoznaje svaki element s z-index vrijednošću i svaku granicu stacking context.
Elementi s z-index vrijednostima dobivaju obojene prekrivače izravno na stranici, s oznakama koje prikazuju njihove z-index brojeve. Veće vrijednosti pojavljuju se s toplijim bojama, manje vrijednosti s hladnijim bojama.
Otvorite bočni panel kako biste vidjeli sve z-index slojeve sortirane od najvećeg do najmanjeg. Svaki unos prikazuje vrijednost, selektor i position svojstvo. Kliknite bilo koji unos kako biste označili element na stranici.
Odjeljak "Stacking Contexts" u panelu navodi svaki element koji stvara novi stacking context i odgovorno CSS svojstvo. To je obično ključ za razumijevanje z-index problema.
Kliknite bilo koji element kako biste vidjeli lanac nadređenih stacking contexts — koji nadređeni contexts utječu na redoslijed prikazivanja. Pratite lanac prema gore kako biste pronašli granicu context koja uzrokuje problem slaganja.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
