„Z-Index“ paaiškinta: kaip sukrauti elementus naudojant CSS

Aš visada kovojau su CSS nuosavybės z indeksu. Iš pradžių skamba taip lengvai. Elementai, turintys didesnę z indekso vertę, rodomi prieš tuos, kurių z indekso vertė yra mažesnė. Vis dėlto daug kartų esu patekęs į situacijas, kai atrodo, kad z indekso reikšmė neturėjo jokio poveikio.

Nusprendžiau, kad man pakako bandymų ir klaidų naudojant „z-index“ ir norėjau geriau suprasti. Tikiuosi, kad šis straipsnis gali jums padėti, todėl niekada nesusimąstysite, kodėl „z-index“ nedaro to, ko tikitės.

Numatytoji krovimo tvarka

Pirmiausia paminėkime numatytąją tvarką, kurioje naršyklė kaupia elementus, kai nėra taikomas z indeksas:

  1. Šaknies elementas (elementas)
  2. Nepastatyti elementai jų apibrėžimo tvarka
  3. Elementai išdėstomi jų apibrėžta tvarka

Nepastatytas elementas yra elementas, kurio numatytoji padėties vertė yra statinė. Padėtas elementas yra elementas, turintis bet kurią kitą pozicijos vertę. Kitų verčių pavyzdžiai: absoliuti, santykinė, lipni ar fiksuota.

HTML:

CSS:

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */
.blue, .pink, .orange { position: absolute;}

Žalia dėžutė dokumente apibrėžta paskutinė. Vis dėlto jis pasirodo už kitų, nes nėra padėtas.

Krovimas su z indeksu

Jei dabar norime pakeisti šių elementų kaupimo tvarką, galime naudoti ypatybę z-index. Elementas su didesniu z indeksu bus rodomas prieš elementą su mažesniu z indeksu. Pažymėtina, kad z indeksas veikia tik su išdėstytais elementais .

.blue, .pink, .orange { position: absolute;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100; // has no effect since the green box is non- positioned}

Oranžinė dėžutė su didesniu z indeksu rodoma priešais mėlyną langelį.

Krovimo kontekstas

Tarkime, kad mes pridėsime kitą išdėstytą langelį prie išdėstymo, kurį norime išdėstyti už rožinės spalvos langelio. Mes atnaujiname savo kodą taip:

HTML:

CSS:

.blue, .pink, .orange, .purple { position: absolute;}
.purple { z-index: 0;}
.pink { z-index: 1;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Mūsų rožinė dėžutė rodoma priešais violetinę dėžę, kaip tikėtasi, bet kas nutiko oranžinei dėžutei? Kodėl staiga atsilieka nuo mėlynos spalvos, nors jo indeksas yra didesnis? Taip yra todėl, kad pridėjus z indekso vertę prie elemento susidaro vadinamasis krovimo kontekstas .

Rožinės spalvos langelio z indekso vertė yra kitokia nei automatinė, kuri sudaro naują kaupimo kontekstą. Tai, kad jis sudaro kaupimo kontekstą, turi įtakos jo antrinių elementų rodymui.

Galima pakeisti rausvos dėžės vaikų elementų kaupimo tvarką. Tačiau jų z indeksas turi reikšmę tik tame kaupimo kontekste . Tai reiškia, kad mes negalėsime perkelti oranžinės spalvos langelio priešais mėlyną dėžę, nes jie nebėra tame pačiame kaupimo kontekste.

Jei norime, kad mėlyna dėžutė ir oranžinė dėžutės būtų to paties kaupimo konteksto dalis, mėlyną dėžę galime apibrėžti kaip rožinės dėžutės antrinį elementą. Tai padarys mėlyną langelį už oranžinio.

Krovimo kontekstai formuojasi ne tik taikant elementui z indeksą. Yra keletas kitų savybių, dėl kurių elementai formuoja krovimo kontekstus. Keletas pavyzdžių: filtras, neskaidrumas ir transformacija.

Grįžkime prie ankstesnio mūsų pavyzdžio. Mėlyna dėžutė vėl yra rožinės dėžutės brolis. Šį kartą, užuot pridėję z indeksą prie rožinės spalvos langelio, mes pritaikome filtrą.

HTML:

CSS:

.blue, .pink, .orange { position: absolute;}
.pink { filter: hue-rotate(20deg);}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Oranžinės spalvos langelio z indeksas vis tiek yra didesnis nei mėlynos spalvos, tačiau vis tiek rodomas už jo. Taip yra todėl, kad dėl filtro vertės rožinė dėžutė suformavo naują kaupimo kontekstą.

Santrauka

Naudodami z indeksą išdėstytuose elementuose, galime pakeisti numatytąją kaupimo tvarką.

Taikant tam tikras CSS ypatybes, elementas gali sudaryti kaupimo kontekstą. Z indekso reikšmės turi reikšmę tik tame pačiame kaupimo kontekste.

Norėdami gauti daugiau informacijos apie „z-index“, rekomenduoju šį straipsnį. Rašydamas tai gavau daug įkvėpimo.

Ačiū, kad skaitėte! :)