Z-indeksi selgitus: kuidas elemente CSS-i abil virnastada

Olen CSS-i vara z-indeksiga alati vaeva näinud. Alguses kõlab see nii lihtsalt. Kõrgema z-indeksi väärtusega elemendid kuvatakse madalama z-indeksi väärtusega elementide ees. Sellegipoolest olen palju kordi sattunud olukordadesse, kus tundub, et z-indeksi väärtusel polnud üldse mingit mõju.

Otsustasin, et z-indeksiga on mul piisavalt katseid ja vigu ning et tahan paremini mõista. Loodan, et see artikkel võib teid aidata, nii et te ei imesta kunagi, miks z-indeks ei tee seda, mida te eeldate.

Virnastamise vaikekorraldus

Mainime kõigepealt vaikimisi järjestust, kuhu brauser elemente ladub, kui z-indeksit pole rakendatud:

  1. Juurelement (element)
  2. Paigutamata elemendid nende määratlemise järjekorras
  3. Paigutatud elemendid nende määratletud järjekorras

Paigutamata element on vaikepositsiooni staatilise väärtusega element. Paigutatud element on mis tahes muu positsiooni väärtusega element. Muud väärtused on näiteks absoluutsed, suhtelised, kleepuvad või fikseeritud.

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;}

Rohelise kasti määratlesime dokumendis viimasena. Sellegipoolest ilmub see teiste taha, kuna see pole paigas.

Virnastamine z-indeksiga

Kui tahame nüüd nende elementide virnastamise järjekorda muuta, saame kasutada omadust z-indeks. Kõrgema z-indeksiga element kuvatakse madalama z-indeksiga elemendi ees. Üks asi, mida tuleb märkida, on see, et z-indeks töötab ainult paigutatud elementidega .

.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ž kõrgema z-indeksiga kast kuvatakse sinise kasti ees.

Konteksti virnastamine

Oletame, et lisame paigutusele veel ühe paigutatud kasti, mille tahame paigutada roosa kasti taha. Värskendame oma koodi järgmisele:

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;}

Meie roosa kast kuvatakse ootuspäraselt violetse kasti ees, kuid mis juhtus oranži kastiga? Miks on see äkki sinise taga, kuigi selle z-indeks on kõrgem? Seda seetõttu, et elemendi z-indeksi väärtuse lisamine moodustab nn virnastamise konteksti .

Roosal kastil on muu kui z-indeksi väärtus peale auto, mis moodustab uue virnastamise konteksti. Asjaolu, et see moodustab virnastamise konteksti, mõjutab selle alamelementide kuvamist.

Roosa kasti lapselementide virnastamise järjekorda on võimalik muuta. Kuid nende z-indeksil on tähendus ainult selles virnastamise kontekstis . See tähendab, et me ei saa oranži kasti sinise kasti ette teisaldada, kuna need ei kuulu enam samasse virnastamise konteksti.

Kui tahame, et sinine ja oranž kast oleksid osa samast virnastamise kontekstist, saame määratleda sinise kasti roosa kasti lapselemendina. Nii ilmub sinine kast oranži taha.

Virnastamise kontekstid ei teki mitte ainult z-indeksi rakendamisel elemendile. On veel mitmeid omadusi, mis põhjustavad elementide virnastamise konteksti. Mõned näited on: filter, läbipaistmatus ja teisendus.

Tuleme tagasi oma eelmise näite juurde. Sinine kast on jälle roosa kasti õde-vend. Seekord rakendame roosa kasti z-indeksi lisamise asemel sellele filtrit.

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žil kastil on endiselt kõrgem z-indeks kui sinisel, kuid kuvatakse endiselt selle taga. Seda seetõttu, et filtri väärtus põhjustas roosast kastist uue virnastamise konteksti.

Kokkuvõte

Kasutades paigutatud elementide z-indeksit, saame muuta virnastamise vaikekorda.

Teatud CSS-i omaduste rakendamisel võib element moodustada virnastamise konteksti. Z-indeksi väärtustel on tähendus ainult samas virnastamise kontekstis.

Z-indeksi kohta lisateabe saamiseks soovitan seda artiklit. Sain sellest kirjutades palju inspiratsiooni.

Täname lugemast! :)