Z-Indeksi Inspektor paljastab iga elemendi täieliku virnamise järjekorra veebilehel. Iga z-indeksi väärtusega element tõstetakse esile ja märgistatakse otse lehel ning sorteeritud kihtide kaardi paneel näitab kõiki z-indeksi kihte alt üles. Tuvastab virnamiskontekstid, mis on loodud positsiooni, transformatsiooni, läbipaistvuse ja muude CSS omaduste abil — lõpuks muudab z-indeksi silumise visuaalseks ja intuitiivseks.
Z-indeksi vead on mõned frustreerivaimad probleemid CSS-is. Modaal, mis peaks ilmuma kõige kohal, on peidetud külgriba taha. Rippmenüü kaob järgmise sektsiooni taha. Tööriistavihje on nähtamatu, kuna vanemaelement loob ootamatu virnamiskonteksti. Algpõhjus on peaaegu alati arusaamatus sellest, kuidas virnamiskontekstid toimivad — ja brauseri DevTools annab nende visualiseerimiseks peaaegu mingit abi. Z-Indeksi Inspektor muudab nähtamatu nähtavaks. Iga element, millel on selge z-indeks, saab värvitud kihistuse ja sildi, mis näitab selle väärtust. Sorteeritud kihtide kaardi paneel loetleb kõik z-indeksi väärtused alt (madalaim) üles (kõrgeim), näidates, millisele CSS klassile või elemendile iga väärtus kuulub. Mis kõige tähtsam, tööriist tuvastab virnamiskonteksti piirid — elemendid, mis loovad uusi virnamiskontekste positsiooni + z-indeksi, transformatsiooni, läbipaistvuse < 1, filtri, will-change või isolatsiooni kaudu. Mõistmine, milline eelkäija loob virnamiskonteksti, on tavaliselt võti z-indeksi vigade parandamiseks.
Iga z-indeksi väärtusega element saab poollabipaistva värvitud kihistuse ja sildi märgise, mis näitab selle z-indeksi numbrit. Kõrgemad z-indeksi väärtused saavad soojemaid värve (punased), madalamad väärtused saavad jahedamaid värve (sinised). Visuaalne kihistumine muudab virnamise järjekorra kohe intuitiivseks.
Külgpaneel loetleb kõik lehel leitud z-indeksi väärtused, sorteerituna kõrgeimast (ülemine) madalaimani (alumine). Iga kirje näitab z-indeksi väärtust, CSS selektorit või klassinime ja positsiooni omadust. Klõpsa mis tahes kirjel, et tõsta esile vastav element lehel.
Tuvastab iga virnamiskonteksti piiri lehel ja CSS omaduse, mis selle loob — position: relative/absolute koos z-indeksiga, transform, opacity < 1, filter, will-change, isolation: isolate või contain: layout. Need loetletakse eraldi, et saaksid jälgida, miks z-indeksi väärtus ei käitu ootuspäraselt.
Klõpsa mis tahes kihti paneelil, et tõsta esile ja kerida vastava elemendini lehel. Või klõpsa mis tahes esiletõstetud elementi lehel, et leida see kihtide kaardi paneelilt. Navigeeri virnamise järjekorda kummas suunas on loomulikum.
Iga kihi kirje näitab elemendi CSS positsiooni väärtust (static, relative, absolute, fixed, sticky), kuna z-indeks kehtib ainult paigutatud elementidele. Märka juhtumeid, kus z-indeks on seatud, kuid positsioon on staatiline — tavaline viga, kus z-indeksil pole mõju.
Iga valitud elemendi jaoks näe täielikku eelkäija virnamiskontekstide ahelat kuni juureni. Mõista täpselt, milline eelkäija virnamiskontekst piirab elemendi z-indeksi ulatust — peamine ülevaade enamiku z-indeksi silumise jaoks.
Modaal z-index: 9999 on peidetud külgriba taha z-index: 10-ga. Kuidas? Z-Indeksi Inspektor näitab, et modaali vanemal on position: relative ja loob virnamiskonteksti z-index: 1-ga, samas kui külgriba vanemal on z-index: 2. Modaal ei saa kunagi oma vanema kontekstist pääseda.
Rippmenüü kaob järgmise sektsiooni taha avamisel. Inspektor paljastab, et menüü konteineri on overflow: hidden (mis loob samuti virnamiskonteksti) või et järgmisel sektsioonil on kõrgem z-indeks. Visuaalne kihi esiletõstmine muudab kattumise ilmseks.
Aja jooksul kogunevad z-indeksi väärtused: 10, 100, 999, 9999, 99999. Kihtide kaart näitab kõiki väärtusi sorteerituna, muutes lihtsamaks tegeliku vajamineva vahemiku tuvastamise ja lihtsustamise puhtale skaalale (1, 2, 3, 10, 100).
Vestlusvidinad, küpsiste bännerid ja analüütika kihistused süstivad elemente kõrgete z-indeksi väärtustega. Z-Indeksi Inspektor näitab täpselt, milliseid väärtusi nad kasutavad, aidates sul seada oma z-indeksi väärtused sobivalt, et vältida konflikte.
Vaata üle kõik virnamiskontekstid lehel, et kontrollida mittevajalikke. Visuaalseteks efektideks rakendatud transformatsioonid, filtrid ja läbipaistvus võivad kogemata luua virnamiskontekste, mis põhjustavad z-indeksi probleeme mujal. Kontekstide loend muudab need kõik nähtavaks.
Ava DevSuite Pro ujuv dokk ja klõpsa Z-Indeksi Inspektori ikoonil. Tööriist skannib lehe ja tuvastab iga elemendi z-indeksi väärtusega ja iga virnamiskonteksti piiri.
Elemendid z-indeksi väärtustega saavad värvitud kihistused otse lehel, koos siltidega, mis näitavad nende z-indeksi numbreid. Kõrgemad väärtused ilmuvad soojema värviga, madalamad väärtused jahedama värviga.
Ava külgpaneel, et näha kõiki z-indeksi kihte sorteerituna kõrgeimast madalaimani. Iga kirje näitab väärtust, selektorit ja positsiooni omadust. Klõpsa mis tahes kirjel, et tõsta esile element lehel.
Paneeli "Virnamiskontekstid" sektsioon loetleb iga elemendi, mis loob uue virnamiskonteksti, ja vastutava CSS omaduse. See on tavaliselt võti z-indeksi probleemide mõistmiseks.
Klõpsa mis tahes elemendil, et näha selle eelkäija virnamiskonteksti ahelat — millised vanema kontekstid mõjutavad selle renderdamise järjekorda. Järgi ahelat ülespoole, et leida konteksti piir, mis põhjustab virnamise probleemi.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
