A Z-Index Inspector feltárja egy weboldal összes elemének teljes rétegződési sorrendjét. Minden z-index értékkel rendelkező elem kiemelésre és felcímkézésre kerül közvetlenül az oldalon, egy rendezett rétegtérkép panel pedig alulról felfelé mutatja az összes z-index réteget. Felismeri a position, transform, opacity és egyéb CSS-tulajdonságok által létrehozott verem-kontextusokat – így a z-index hibakeresés végre vizuálissá és intuitívvá válik.
A z-index hibák a CSS legidegesítőbb problémái közé tartoznak. Egy modal, amelynek minden fölött meg kellene jelennie, egy oldalsáv mögé rejtőzik. Egy legördülő menü eltűnik a következő szekció mögött. Egy tooltip láthatatlan, mert egy szülőelem váratlan verem-kontextust hoz létre. A gyökérok szinte mindig a verem-kontextusok működésének félreértése – a böngésző DevTools pedig alig nyújt segítséget ezek megjelenítéséhez. A Z-Index Inspector láthatóvá teszi a láthatatlant. Minden explicit z-indexszel rendelkező elem színes átfedést és az értékét mutató címkét kap. Egy rendezett rétegtérkép panel felsorolja az összes z-index értéket alulról (legalacsonyabb) felfelé (legmagasabb), megmutatva, melyik CSS-osztályhoz vagy elemhez tartozik az adott érték. Ami a legfontosabb, az eszköz azonosítja a verem-kontextus határait – azokat az elemeket, amelyek position + z-index, transform, opacity < 1, filter, will-change vagy isolation révén új verem-kontextust hoznak létre. Annak megértése, hogy melyik ős hozza létre a verem-kontextust, általában a kulcs a z-index hibák megoldásához.
Minden z-index értékkel rendelkező elem félig átlátszó, színes átfedést és a z-index számát mutató címkét kap. A magasabb z-index értékek melegebb színeket (piros), az alacsonyabbak hidegebb színeket (kék) kapnak. A vizuális rétegződés azonnal intuitívvá teszi a rétegsorrendet.
Egy oldalsó panel felsorolja az oldalon található összes z-index értéket, a legmagasabbtól (fent) a legalacsonyabbig (lent) rendezve. Minden bejegyzés megmutatja a z-index értéket, a CSS-szelektort vagy osztálynevet, valamint a position tulajdonságot. Kattintson bármelyik bejegyzésre az adott elem kiemeléséhez az oldalon.
Azonosítja az oldal összes verem-kontextus határát és az azt létrehozó CSS-tulajdonságot – position: relative/absolute z-indexszel, transform, opacity < 1, filter, will-change, isolation: isolate vagy contain: layout. Ezek külön listázva jelennek meg, így nyomon követhető, miért nem úgy viselkedik egy z-index érték, ahogy elvárná.
Kattintson a panel bármelyik rétegére a megfelelő elem kiemeléséhez és az oda görgetéshez az oldalon. Vagy kattintson az oldalon kiemelt bármely elemre, hogy megtalálja azt a rétegtérkép panelen. Bármelyik irányból bejárhatja a rétegsorrendet, ahogy éppen kényelmes.
Minden réteg-bejegyzés megmutatja az elem CSS position értékét (static, relative, absolute, fixed, sticky), mivel a z-index csak pozicionált elemekre érvényes. Azonosítsa azokat az eseteket, amikor a z-index be van állítva, de a position static – ez egy gyakori hiba, amikor a z-indexnek nincs hatása.
Bármely kiválasztott elemhez megtekintheti az ős verem-kontextusok teljes láncát egészen a gyökérig. Pontosan megértheti, melyik ős verem-kontextusa korlátozza az elem z-index hatókörét – ez a legtöbb z-index hibakeresés kulcsfontosságú felismerése.
Egy z-index: 9999 értékű modal egy z-index: 10 értékű oldalsáv mögé rejtőzik. Hogyan lehetséges ez? A Z-Index Inspector megmutatja, hogy a modal szülője position: relative-tel rendelkezik, és z-index: 1 értékű verem-kontextust hoz létre, míg az oldalsáv szülőjének z-index: 2 értéke van. A modal soha nem tud kitörni a szülője kontextusából.
Egy legördülő menü megnyitáskor eltűnik a következő szekció mögött. Az ellenőrző felfedi, hogy a menü konténerén overflow: hidden van beállítva (ami szintén verem-kontextust hoz létre), vagy hogy a következő szekció magasabb z-index értékkel rendelkezik. A vizuális réteg-kiemelés nyilvánvalóvá teszi az átfedést.
Idővel a z-index értékek felhalmozódnak: 10, 100, 999, 9999, 99999. A rétegtérkép rendezve mutatja az összes értéket, így könnyen azonosítható a ténylegesen szükséges tartomány, és egyszerűsíthető egy tiszta skálára (1, 2, 3, 10, 100).
A chat-widgetek, cookie-bannerek és analitikai átfedések magas z-index értékű elemeket illesztenek be. A Z-Index Inspector pontosan megmutatja, milyen értékeket használnak, így megfelelően beállíthatja a saját z-index értékeit az ütközések elkerülése érdekében.
Tekintse át az oldal összes verem-kontextusát, hogy ellenőrizze, van-e köztük felesleges. A vizuális effektusokhoz alkalmazott transzformációk, szűrők és átlátszóság véletlenül verem-kontextusokat hozhatnak létre, amelyek máshol z-index problémákat okoznak. A kontextuslista mindet láthatóvá teszi.
Nyissa meg a DevSuite Pro lebegő dokkját, és kattintson a Z-Index Inspector ikonra. Az eszköz átvizsgálja az oldalt, és azonosítja az összes z-index értékkel rendelkező elemet és verem-kontextus határt.
A z-index értékkel rendelkező elemek közvetlenül az oldalon színes átfedést kapnak, a z-index számukat mutató címkékkel. A magasabb értékek melegebb, az alacsonyabbak hidegebb színekkel jelennek meg.
Nyissa meg az oldalsó panelt, hogy megtekintse az összes z-index réteget a legmagasabbtól a legalacsonyabbig rendezve. Minden bejegyzés megmutatja az értéket, a szelektort és a position tulajdonságot. Kattintson bármelyik bejegyzésre az elem kiemeléséhez az oldalon.
A panel „Verem-kontextusok” szekciója felsorolja minden olyan elemet, amely új verem-kontextust hoz létre, valamint az ezért felelős CSS-tulajdonságot. Ez általában a kulcs a z-index problémák megértéséhez.
Kattintson bármely elemre, hogy megtekintse az ős verem-kontextus láncát – mely szülő kontextusok befolyásolják a megjelenítési sorrendjét. Kövesse a láncot felfelé, hogy megtalálja azt a kontextushatárt, amely a rétegződési problémát okozza.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
