Z-Index Inspector paljastaa verkkosivun jokaisen elementin täydellisen pinontajärjestyksen. Kaikki z-index-arvon omaavat elementit korostetaan ja merkitään suoraan sivulle, ja lajiteltu kerroskarttapaneeli näyttää kaikki z-index-kerrokset alhaalta ylös. Työkalu tunnistaa pinontakontekstit, jotka luodaan position-, transform-, opacity- ja muilla CSS-ominaisuuksilla — tehden z-index-virheenkorjauksesta viimein visuaalista ja intuitiivista.
Z-index-bugit ovat joitakin CSS:n turhauttavimmista ongelmista. Modaali, jonka pitäisi näkyä kaiken päällä, piilotetaan sivupalkin taakse. Pudotusvalikko katoaa seuraavan osion taakse. Työkaluvihje on näkymätön, koska ylätason elementti luo odottamattoman pinontakontekstin. Juurisyy on lähes aina väärinymmärrys siitä, miten pinontakontekstit toimivat — eikä selaimen DevTools anna juuri apua niiden visualisoinnissa. Z-Index Inspector tekee näkymättömästä näkyvää. Jokainen eksplisiittisen z-indexin omaava elementti saa värillisen peitekerroksen ja etiketin, joka näyttää sen arvon. Lajiteltu kerroskarttapaneeli listaa kaikki z-index-arvot alhaalta (pienin) ylös (suurin) osoittaen, mihin CSS-luokkaan tai elementtiin kukin arvo kuuluu. Tärkeintä on, että työkalu tunnistaa pinontakontekstirajat — elementit, jotka luovat uusia pinontakonteksteja position + z-index-, transform-, opacity < 1-, filter-, will-change- tai isolation-ominaisuuksilla. Sen ymmärtäminen, mikä esi-isäelementti luo pinontakontekstin, on yleensä avain z-index-bugien korjaamiseen.
Jokainen z-index-arvon omaava elementti saa puoliläpinäkyvän värillisen peitekerroksen ja etikettimerkinnän, joka näyttää sen z-index-numeron. Korkeammat z-index-arvot saavat lämpimämmät värit (punaiset), matalammat arvot viileämmät värit (siniset). Visuaalinen kerrostuminen tekee pinontajärjestyksestä välittömästi intuitiivisen.
Sivupaneeli listaa kaikki sivulta löydetyt z-index-arvot suurimmasta (ylhäältä) pienimpään (alhaalta) järjestettynä. Kukin merkintä näyttää z-index-arvon, CSS-valitsimen tai luokan nimen sekä position-ominaisuuden. Napsauta mitä tahansa merkintää korostaaksesi vastaavan elementin sivulla.
Tunnistaa jokaisen sivun pinontakontekstirajauksen ja sen luovan CSS-ominaisuuden — position: relative/absolute z-indexin kanssa, transform, opacity < 1, filter, will-change, isolation: isolate tai contain: layout. Ne listataan erikseen, jotta voit jäljittää, miksi z-index-arvo ei toimi odotetusti.
Napsauta mitä tahansa paneelin kerrosta korostaaksesi ja vierittääksesi sivulla vastaavan elementin kohdalle. Tai napsauta mitä tahansa sivulla korostettua elementtiä löytääksesi sen kerroskarttapaneelista. Navigoi pinontajärjestyksessä kumpaankin suuntaan luontevasti.
Kukin kerrosmerkintä näyttää elementin CSS position -arvon (static, relative, absolute, fixed, sticky), sillä z-index koskee vain sijoiteltuja elementtejä. Havaitse tapaukset, joissa z-index on asetettu mutta position on static — yleinen bugi, jossa z-indexillä ei ole vaikutusta.
Mille tahansa valitulle elementille näet täydellisen esi-isäpinontakontekstien ketjun ylös juureen asti. Ymmärrät täsmälleen, minkä esi-isäelementin pinontakonteksti rajoittaa elementin z-index-laajuutta — tämä on avaintieto useimpien z-index-virheenkorjauksissa.
Modaali, jolla on z-index: 9999, on piilotettu sivupalkin taakse, jolla on z-index: 10. Miten? Z-Index Inspector osoittaa, että modaalin ylätasolla on position: relative ja se luo pinontakontekstin z-index-arvolla 1, kun taas sivupalkin ylätasolla on z-index: 2. Modaali ei voi koskaan paeta ylätasonsa kontekstia.
Pudotusvalikko katoaa seuraavan osion taakse avautuessaan. Tarkastustyökalu paljastaa, että valikon säilön ominaisuutena on overflow: hidden (joka myös luo pinontakontekstin) tai että seuraavalla osiolla on korkeampi z-index. Visuaalinen kerroskorostus tekee päällekkäisyydestä ilmeisen.
Ajan myötä z-index-arvot kertyvät: 10, 100, 999, 9999, 99999. Kerroskartta näyttää kaikki arvot järjestettynä, jolloin on helppo tunnistaa todellinen tarvittava vaihteluväli ja yksinkertaistaa selkeäksi asteikoksi (1, 2, 3, 10, 100).
Chat-widgetit, evästebannerit ja analytiikkaoverlayit lisäävät elementtejä korkeilla z-index-arvoilla. Z-Index Inspector näyttää täsmälleen mitä arvoja ne käyttävät, auttaen sinua asettamaan omat z-index-arvosi asianmukaisesti ristiriitojen välttämiseksi.
Tarkista kaikki sivun pinontakontekstit tarpeettomien havaitsemiseksi. Visuaalisten tehosteiden vuoksi sovelletut transform-, filter- ja opacity-ominaisuudet saattavat tahattomasti luoda pinontakonteksteja, jotka aiheuttavat z-index-ongelmia muualla. Kontekstilista tekee ne kaikki näkyviksi.
Avaa DevSuite Pro -kelluva telakka ja napsauta Z-Index Inspector -kuvaketta. Työkalu skannaa sivun ja tunnistaa jokaisen z-index-arvon omaavan elementin sekä jokaisen pinontakontekstirajauksen.
Z-index-arvoja omaavat elementit saavat värillisiä peitekerroksia suoraan sivulle etikettien osoittaessa niiden z-index-numerot. Korkeammat arvot näkyvät lämpimämmillä väreillä, matalammat arvot viileämmillä väreillä.
Avaa sivupaneeli nähdäksesi kaikki z-index-kerrokset suurimmasta pienimpään järjestettynä. Kukin merkintä näyttää arvon, valitsimen ja position-ominaisuuden. Napsauta mitä tahansa merkintää korostaaksesi elementin sivulla.
Paneelin "Pinontakontekstit"-osio listaa jokaisen elementin, joka luo uuden pinontakontekstin, sekä vastaavan CSS-ominaisuuden. Tämä on yleensä avain z-index-ongelmien ymmärtämiseen.
Napsauta mitä tahansa elementtiä nähdäksesi sen esi-isäpinontakontekstiketjun — mitkä ylätason kontekstit vaikuttavat sen renderointijärjestykseen. Seuraa ketjua ylöspäin löytääksesi kontekstirajauksen, joka aiheuttaa pinontaongelman.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
