Inihahayag ng Z-Index Inspector ang kumpletong stacking order ng bawat elemento sa isang webpage. Ang bawat elemento na may z-index value ay naka-highlight at may label nang direkta sa pahina, at ang isang sorted layer map panel ay nagpapakita ng lahat ng z-index layer mula ibaba hanggang itaas. Natutukoy ang mga stacking context na nilikha ng position, transform, opacity, at iba pang CSS property — sa wakas ay ginagawang visual at intuitive ang z-index debugging.
Ang mga z-index bug ay kabilang sa pinakafrustrating na isyu sa CSS. Ang isang modal na dapat lumabas sa itaas ng lahat ay nakatago sa likod ng sidebar. Ang isang dropdown menu ay nawawala sa likod ng susunod na section. Ang isang tooltip ay hindi nakikita dahil ang parent element ay lumilikha ng hindi inaasahang stacking context. Ang ugat ng problema ay halos palaging maling pag-unawa sa kung paano gumagana ang mga stacking context — at halos walang tulong ang browser DevTools sa pag-visualize ng mga ito. Ginagawa ng Z-Index Inspector na makita ang hindi nakikita. Ang bawat elemento na may explicit na z-index ay nakakakuha ng colored overlay at label na nagpapakita ng halaga nito. Ang isang sorted layer map panel ay naglilista ng lahat ng z-index value mula ibaba (pinakamababa) hanggang itaas (pinakamataas), na nagpapakita kung aling CSS class o elemento ang may kaugnayan sa bawat value. Pinakamahalaga, natutukoy ng tool ang mga stacking context boundary — mga elementong lumilikha ng bagong stacking context sa pamamagitan ng position + z-index, transform, opacity < 1, filter, will-change, o isolation. Ang pag-unawa kung aling ancestor ang lumilikha ng stacking context ay kadalasang susi sa pag-aayos ng mga z-index bug.
Ang bawat elemento na may z-index value ay nakakakuha ng semi-transparent na colored overlay at label badge na nagpapakita ng z-index number nito. Ang mas mataas na z-index value ay nakakakuha ng mas mainit na kulay (pula), ang mas mababang value ay nakakakuha ng mas malamig na kulay (asul). Ang visual na layering ay ginagawang agad na intuitive ang stacking order.
Ang isang side panel ay naglilista ng lahat ng z-index value na natagpuan sa pahina, na inayos mula pinakamataas (itaas) hanggang pinakamababa (ibaba). Ang bawat entry ay nagpapakita ng z-index value, ng CSS selector o class name, at ng position property. I-click ang anumang entry upang i-highlight ang kaukulang elemento sa pahina.
Natutukoy ang bawat stacking context boundary sa pahina at ang CSS property na lumilikha nito — position: relative/absolute na may z-index, transform, opacity < 1, filter, will-change, isolation: isolate, o contain: layout. Ang mga ito ay nakalista nang hiwalay upang masubaybayan mo kung bakit ang isang z-index value ay hindi kumikilos gaya ng inaasahan.
I-click ang anumang layer sa panel upang i-highlight at mag-scroll patungo sa kaukulang elemento sa pahina. O i-click ang anumang naka-highlight na elemento sa pahina upang hanapin ito sa layer map panel. Mag-navigate sa stacking order sa anumang direksyong natural.
Ang bawat layer entry ay nagpapakita ng CSS position value ng elemento (static, relative, absolute, fixed, sticky) dahil ang z-index ay naaangkop lamang sa mga positioned element. Tukuyin ang mga kaso kung saan nakatakda ang z-index ngunit ang position ay static — isang karaniwang bug kung saan walang epekto ang z-index.
Para sa anumang napiling elemento, makita ang kumpletong chain ng ancestor stacking context hanggang sa root. Unawain nang eksakto kung aling stacking context ng ancestor ang nililimitahan ang z-index scope ng elemento — ang pangunahing insight para sa karamihan ng z-index debugging.
Ang isang modal na may z-index: 9999 ay nakatago sa likod ng sidebar na may z-index: 10. Bakit? Ipinapakita ng Z-Index Inspector na ang parent ng modal ay may position: relative at lumilikha ng stacking context na may z-index: 1, habang ang parent ng sidebar ay may z-index: 2. Hindi kailanman makakatakas ang modal sa context ng parent nito.
Ang isang dropdown menu ay nawawala sa likod ng susunod na section kapag binuksan ito. Inihahayag ng inspector na ang container ng menu ay may overflow: hidden (na lumilikha rin ng stacking context) o na ang susunod na section ay may mas mataas na z-index. Ginagawang halata ng visual layer highlighting ang overlap.
Sa paglipas ng panahon, nag-iipon ang mga z-index value: 10, 100, 999, 9999, 99999. Ipinapakita ng layer map ang lahat ng value na inayos, na ginagawang madaling tukuyin ang aktwal na hanay na kailangan at pasimplehin sa isang malinis na scale (1, 2, 3, 10, 100).
Ang mga chat widget, cookie banner, at analytics overlay ay nag-iinject ng mga elemento na may mataas na z-index value. Ipinapakita ng Z-Index Inspector nang eksakto kung anong value ang ginagamit nila, na tumutulong sa iyo na magtakda ng sarili mong mga z-index value nang naaangkop upang maiwasan ang mga conflict.
Suriin ang lahat ng stacking context sa pahina upang tingnan ang mga hindi kinakailangan. Ang mga transform, filter, at opacity na inilapat para sa mga visual effect ay maaaring hindi sinasadyang lumikha ng mga stacking context na nagdudulot ng mga isyu sa z-index sa ibang lugar. Ginagawa ng context list ang lahat ng ito na nakikita.
Buksan ang DevSuite Pro floating dock at i-click ang icon ng Z-Index Inspector. Ini-scan ng tool ang pahina at natutukoy ang bawat elemento na may z-index value at bawat stacking context boundary.
Ang mga elemento na may z-index value ay nakakakuha ng colored overlay nang direkta sa pahina, na may mga label na nagpapakita ng kanilang z-index number. Ang mas mataas na value ay lumalabas na may mas mainit na kulay, ang mas mababang value ay may mas malamig na kulay.
Buksan ang side panel upang makita ang lahat ng z-index layer na inayos mula pinakamataas hanggang pinakamababa. Ang bawat entry ay nagpapakita ng value, selector, at position property. I-click ang anumang entry upang i-highlight ang elemento sa pahina.
Ang seksyon ng panel na "Stacking Contexts" ay naglilista ng bawat elemento na lumilikha ng bagong stacking context at ang responsableng CSS property. Ito ang kadalasang susi sa pag-unawa ng mga isyu sa z-index.
I-click ang anumang elemento upang makita ang ancestor stacking context chain nito — kung aling parent context ang nakaaapekto sa rendering order nito. Sundin ang chain pataas upang mahanap ang context boundary na nagdudulot ng stacking issue.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.
