Z-Index Inspector dezvăluie ordinea completă de stivuire a fiecărui element dintr-o pagină web. Fiecare element cu o valoare z-index este evidențiat și etichetat direct pe pagină, iar un panou cu harta straturilor sortate afișează toate straturile z-index de jos în sus. Identifică contextele de stivuire create de position, transform, opacity și alte proprietăți CSS — făcând în sfârșit depanarea z-index vizuală și intuitivă.
Bug-urile de z-index sunt unele dintre cele mai frustrante probleme în CSS. Un modal care ar trebui să apară deasupra tuturor elementelor este ascuns în spatele unei bare laterale. Un meniu dropdown dispare în spatele secțiunii următoare. Un tooltip este invizibil deoarece un element părinte creează un context de stivuire neașteptat. Cauza principală este aproape întotdeauna o neînțelegere a modului în care funcționează contextele de stivuire — iar browser DevTools nu îți oferă aproape niciun ajutor pentru a le vizualiza. Z-Index Inspector face invizibilul vizibil. Fiecare element cu un z-index explicit primește un strat colorat și o etichetă ce îi afișează valoarea. Un panou cu harta straturilor sortate listează toate valorile z-index de jos (cea mai mică) la sus (cea mai mare), arătând cărei clase CSS sau element îi aparține fiecare valoare. Cel mai important, instrumentul identifică limitele contextelor de stivuire — elemente care creează noi contexte de stivuire prin position + z-index, transform, opacity < 1, filter, will-change sau isolation. Înțelegerea căruia ancestor îi creează contextul de stivuire este de obicei cheia rezolvării bug-urilor de z-index.
Fiecare element cu o valoare z-index primește un strat colorat semi-transparent și o insignă etichetă ce afișează numărul z-index. Valorile z-index mai mari primesc culori mai calde (roșii), valorile mai mici primesc culori mai reci (albastre). Stratificarea vizuală face ordinea de stivuire imediat intuitivă.
Un panou lateral listează toate valorile z-index găsite pe pagină, sortate de la cea mai mare (sus) la cea mai mică (jos). Fiecare intrare afișează valoarea z-index, selectorul CSS sau numele clasei și proprietatea position. Dă clic pe orice intrare pentru a evidenția elementul corespunzător pe pagină.
Identifică fiecare limită de context de stivuire de pe pagină și proprietatea CSS care o creează — position: relative/absolute cu z-index, transform, opacity < 1, filter, will-change, isolation: isolate sau contain: layout. Acestea sunt listate separat, astfel că poți urmări de ce o valoare z-index nu se comportă conform așteptărilor.
Dă clic pe orice strat din panou pentru a evidenția și derula la elementul corespunzător de pe pagină. Sau dă clic pe orice element evidențiat de pe pagină pentru a-l localiza în panoul cu harta straturilor. Navighează ordinea de stivuire în orice direcție este naturală.
Fiecare intrare de strat afișează valoarea CSS position a elementului (static, relative, absolute, fixed, sticky), deoarece z-index se aplică doar elementelor poziționate. Identifică cazurile în care z-index este setat, dar position este static — un bug frecvent în care z-index nu are efect.
Pentru orice element selectat, vezi lanțul complet al contextelor de stivuire ancestor până la rădăcină. Înțelege exact care context de stivuire al unui ancestor limitează domeniul z-index al elementului — perspectiva cheie pentru depanarea majorității problemelor de z-index.
Un modal cu z-index: 9999 este ascuns în spatele unei bare laterale cu z-index: 10. De ce? Z-Index Inspector arată că părintele modal-ului are position: relative și creează un context de stivuire cu z-index: 1, în timp ce părintele barei laterale are z-index: 2. Modal-ul nu poate ieși niciodată din contextul părintelui său.
Un meniu dropdown dispare în spatele secțiunii următoare când se deschide. Inspector-ul dezvăluie că containerul meniului are overflow: hidden (care creează și un context de stivuire) sau că secțiunea următoare are un z-index mai mare. Evidențierea vizuală a straturilor face suprapunerea evidentă.
În timp, valorile z-index se acumulează: 10, 100, 999, 9999, 99999. Harta straturilor afișează toate valorile sortate, facilitând identificarea intervalului real necesar și simplificarea la o scară curată (1, 2, 3, 10, 100).
Widget-urile de chat, bannerele de cookie și overlay-urile de analiză injectează elemente cu valori z-index mari. Z-Index Inspector arată exact ce valori utilizează, ajutându-te să setezi propriile valori z-index în mod corespunzător pentru a evita conflictele.
Revizuiește toate contextele de stivuire de pe pagină pentru a verifica dacă există unele inutile. Transform-urile, filter-ele și opacity aplicate pentru efecte vizuale pot crea involuntar contexte de stivuire ce cauzează probleme de z-index în altă parte. Lista de contexte le face pe toate vizibile.
Deschide bara flotantă DevSuite Pro și dă clic pe iconița Z-Index Inspector. Instrumentul scanează pagina și identifică fiecare element cu o valoare z-index și fiecare limită de context de stivuire.
Elementele cu valori z-index primesc straturi colorate direct pe pagină, cu etichete ce afișează numerele z-index. Valorile mai mari apar cu culori mai calde, valorile mai mici cu culori mai reci.
Deschide panoul lateral pentru a vedea toate straturile z-index sortate de la cel mai mare la cel mai mic. Fiecare intrare afișează valoarea, selectorul și proprietatea position. Dă clic pe orice intrare pentru a evidenția elementul pe pagină.
Secțiunea "Stacking Contexts" din panou listează fiecare element care creează un nou context de stivuire și proprietatea CSS responsabilă. Aceasta este de obicei cheia pentru înțelegerea problemelor de z-index.
Dă clic pe orice element pentru a vedea lanțul său de contexte de stivuire ancestor — ce contexte părinte îi afectează ordinea de randare. Urmărește lanțul în sus pentru a găsi limita contextului ce cauzează problema de stivuire.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.
