Z-indeks CSSis

Kattuvate elementide positsioneerimine kaskaaditavate stiilide lehtedega

Üks väljakutseid CSS-positsioneerimise kasutamisel veebihistide paigutuse jaoks on see, et mõned teie elemendid võivad teistega kattuda. See toimib hästi, kui soovite, et HTML-i viimane element oleks peal, aga kui te seda ei tee või kui soovite, et elemendid, mis praegu ei kattuks teistega, teevad seda, sest disain nõuab seda "kihilist" pilti ? Et muuta elementide kattumist, peate kasutama CSS-i vara.

Kui olete kasutanud Wordi ja PowerPointi graafikatööriistu või tugevamat pildiredaktorit nagu Adobe Photoshop, siis on tõenäoline, et olete näinud midagi z-indeksist. Nendes programmides saate esile tõsta esemeid (objekte) ja valida mõne dokumendi teatud elementide "Tagasi saatmiseks" või "Esiotsa" valik. Photoshopis pole teil neid funktsioone, kuid teil on programmi paksus "Layer" ja võite korraldada selle, kus element langeb lõuendil, neid kihte ümber paigutades. Mõlemal nendel näidetel on sisuliselt nende objektide z-indeks.

Mis on z-indeks?

Kui kasutate lehe elementide positsioneerimiseks CSS-i positsioneerimist, peate mõtlema kolmes mõõtmes. Seal on kaks standardset mõõdet: vasak / parem ja ülemine / alumine. Vasakest paremale indeksit tuntakse kui x-indeksit, kusjuures ülemine ja alumine on y-indeks. Nii saate positsioone horisontaalselt või vertikaalselt, kasutades neid kahte indeksit.

Kui veebidisaini saabub, on ka lehe virnastusjärjestus. Iga lehe elementi saab kihistada mõne teise elemendi kohal või selle kohal. Z-indeksi omadus määrab kindlaks, kus on iga elemendi virnas. Kui x-indeks ja y-indeks on horisontaalsed ja vertikaalsed jooned, siis on z-indeks lehe sügavus, põhiliselt kolmas mõõde.

Mulle meeldib mõelda veebilehe elementidele paberitükkide ja veebilehe enda kollaažina. Kui ma panen paberi kindlaks positsioneerimise ja kui palju see on kaetud teiste elementide on z-indeks.

Z-indeks on arv, kas positiivne (nt 100) või negatiivne (nt -100). Vaikeväärtuste z-indeks on 0. Kõrgeima z-indeksiga element on üleval, sellele järgneb järgmine suurim ja nii edasi madalaimale z-indeksile. Kui kahel elemendil on sama z-indeksi väärtus (või see pole määratletud, see tähendab, et kasutate vaikeväärtust 0), salvestab brauser nende HTML-i kujul olevasse järjekorda.

Kuidas kasutada z-indeksit

Andke igale elemendile, mida soovite oma virnas, teistsuguse z-indeksi väärtust. Näiteks kui mul on viis erinevat elementi:

Nad korstnad järgmises järjekorras:

  1. element 2
  2. element 4
  3. element 3
  4. element 5
  5. element 1

Soovitan kasutada oma elementide virnamiseks suhteliselt erinevaid z-indeksiväärtusi. Sel moel, kui lisate lehele hiljem rohkem elemente, on teil ruumi, kus neid saab kleepida, ilma et peaksite kõigi teiste elementide z-indeksi väärtusi korrigeerima. Näiteks:

Võite anda kahele elemendile sama z-indeksi väärtuse. Kui need elemendid on laotud, kuvatakse need järjekorras, mis on kirjutatud HTML-is, kusjuures viimane element on ülaosas.

Üks märk, et element, mis kasutab z-indeksi omadust tõhusalt, peab olema ploki taseme element või kasutab CSS-failis "blokeeringu" või "inline-block" kuvat.

Jennifer Krynini algne artikkel. Redigeeritud 12. septembril 16 Jeremy Girard.