Selgitatud Z-indeksi kohta: kuidas elemente virnastada CSS-i abil

All Bongi foto saidil Unsplash

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

Otsustasin, et mul on z-indeksiga piisavalt katse-eksituse meetodit olnud ja et soovin saada paremat mõistmist. Loodetavasti aitab see artikkel teid aidata, nii et te ei mõtle kunagi, miks z-index ei tee seda, mida te eeldate, et see teeb.

Virnastamise vaikekorraldus

Esiteks mainime vaikekorraldust, millesse brauser elemendid virnastab, kui z-indeksit ei rakendata:

  1. Juurelement (element )
  2. Positsioneerimata elemendid nende määratlemise järjekorras
  3. Positsioneeritud elemendid nende määratlemise järjekorras

Positsioneerimata element on element, mille vaikeväärtus on staatiline. Positsioneeritud element on mis tahes muu positsiooniväärtusega element. Muude väärtuste näideteks on: absoluutne, suhteline, kleepuv või fikseeritud.

HTML:

  

CSS:

/ * See on ainult näites asjakohane CSS. Täieliku CSS-i saamiseks kontrollige piltide all olevaid linke. * /
.sinine, .pink, .orange {
  positsioon: absoluutne;
}
https://codepen.io/ivhed/pen/QrdEBB

Rohelise kasti määratlesime dokumendis viimati. Sellegipoolest ilmub see teiste taha, kuna on positsioneerimata.

Virnastamine z-indeksiga

Kui tahame nüüd muuta nende elementide virnastamise järjekorda, võime kasutada omadust z-index. 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.

.sinine, .pink, .orange {
  positsioon: absoluutne;
}
.blue {
  z-indeks: 2;
}
.orange {
  z-indeks: 3;
}
.green {
  z-indeks: 100; // pole mingit mõju, kuna roheline kast on paigutamata
}
https://codepen.io/ivhed/pen/xjqmpV

Kõrgema z-indeksiga oranž kast kuvatakse sinise kasti ette.

Konteksti virnastamine

Ütleme nii, et lisame paigutusele veel ühe paigutatud kasti, mille tahame paigutada roosa kasti taha. Uuendame oma koodi järgmiselt:

HTML:

  

CSS:

.sinine, .pink, .orange, .purpur {
  positsioon: absoluutne;
}
.purple {
  z-indeks: 0;
}
.pink {
  z-indeks: 1;
}
.blue {
  z-indeks: 2;
}
.orange {
  z-indeks: 3;
}
.green {
  z-indeks: 100;
}
https://codepen.io/ivhed/pen/YLZdjx

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

Roosal ruudul on muu kui z-indeksi väärtus, välja arvatud automaatne, mis moodustab uue virnastamise konteksti. Fakt, et see moodustab virnastatava konteksti, mõjutab selle alamelementide kuvamist.

Roosa kasti lapseelementide 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 sinist kasti ees olevat oranži kasti teisaldada, kuna need pole enam samas virnastamise kontekstis.

Kui soovime, et sinine ja oranž kast oleks osa samast virnastamise kontekstist, võime määratleda sinise kasti roosa kasti lapseelemendina. See muudab sinise kasti oranži taha.

  
  
https://codepen.io/ivhed/pen/erGoJE

Virnastamise kontekstid ei moodustu ainult z-indeksi rakendamisel elemendile. On veel mitmeid muid omadusi, mis põhjustavad elementide virnastamise kontekstide moodustamise. Mõned näited on järgmised: filter, läbipaistmatus ja teisendus.

Läheme tagasi meie eelmise näite juurde. Sinine kast on jälle õde ja vend roosale kastile. Seekord lisame roosale kastile z-indeksi lisamise asemel sellele filtri.

HTML:

  

CSS:

.sinine, .pink, .orange {
  positsioon: absoluutne;
}
.pink {
  filter: tooni pööramine (20 kraadi);
}
.blue {
  z-indeks: 2;
}
.orange {
  z-indeks: 3;
}
.green {
  z-indeks: 100;
}
https://codepen.io/ivhed/pen/LmWMQb

Oranžil kastil on endiselt suurem z-indeks kui sinisel, kuid see kuvatakse selle taga. Selle põhjuseks on asjaolu, et filtri väärtus moodustas roosa kasti uue virnastamise konteksti.

Kokkuvõte

Kasutades positsioneeritud elementidel z-indeksit, saame vaikimisi virnastamise järjekorda muuta.

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

Lisateavet z-indeksi kohta soovitan selles artiklis. Selle kirjutamisel sain sellest palju inspiratsiooni.

Täname, et lugesite! :)