Jedan od izazova prilikom upotrebe CSS pozicioniranja za izgled web stranice je da neki od vaših elemenata mogu preklapati druge. To funkcionira dobro ako želite da posljednji element u HTML bude na vrhu, ali što ako ne želite ili što želite ako elemente koji se trenutačno ne preklapaju s drugima, jer dizajn poziva na ovaj "slojeviti" izgled ? Da biste promijenili način na koji se elementi preklapaju, morate koristiti svojstvo CSS-a.
Ako ste koristili grafičke alate u programu Word i PowerPoint ili robusniji uređivač slika kao što je Adobe Photoshop, onda ste vjerojatno vidjeli nešto poput z-indeksa u akciji. U tim programima možete označiti objekte koje ste nacrtali i odabrati opciju "Pošalji natrag" ili "Dovesti prednji dio" određenih elemenata dokumenta. U programu Photoshop nemate ove funkcije, ali imate okvir "Slojevi" programa i možete urediti gdje element pada na platno preuređivanjem tih slojeva. U oba od ovih primjera, u suštini postavljate z-indeks tih objekata.
Što je Z-indeks?
Kada upotrebljavate CSS pozicioniranje da biste postavili elemente na stranici, morate razmišljati u tri dimenzije. Postoje dvije standardne dimenzije: lijevo / desno i vrh / dno. Indeks od lijeva do deset poznat je kao x-indeks, a od vrha do dna indeks y. Ovako biste postavili elemente vodoravno ili okomito, koristeći ova dva indeksa.
Kada je u pitanju web dizajn, tu je i redoslijed slaganja stranice. Svaki element na stranici može se slojeviti iznad ili ispod bilo kojeg drugog elementa. Z-index svojstvo određuje gdje je u stog svaki element je. Ako su indeks x-indeksa i y-indeks vodoravne i vertikalne linije, onda je z-indeks dubina stranice, u biti treća dimenzija.
Razmislite o elementima na web stranici kao komadi papira i web stranici kao kolaž. Gdje položite papir određuje se pozicioniranjem i koliko je pokriveno drugim elementima je z-indeks.
- Z-indeks je broj, bilo pozitivan (npr. 100) ili negativan (npr., -100).
- Zadani z-indeks je 0.
Element s najvišim z-indeksom nalazi se na vrhu, slijede slijedeći najviši i tako dalje dolje do najnižeg z-indeksa. Ako dva elementa imaju istu z-indeksnu vrijednost (ili nije definirana, što znači da upotrebljavaju zadanu vrijednost od 0), preglednik će ih slati redom kojim se pojavljuju u HTML-u.
Kako koristiti Z-indeks
Dajte svakom elementu koji želite u vašem snopu drugačiju z-indeksnu vrijednost. Na primjer, ako imate pet različitih elemenata:
- element A-z-indeks od -25
- element B - z-indeks od 82
- element C - z-indeks nije postavljen
- element D - z-indeks od 10
- element E - z-indeks od -3
Oni će se slagati u sljedećem redoslijedu:
- element B
- element D
- element C
- element E
- element A
Preporučljivo je upotrebljavati znatno različite vrijednosti z-indeksa kako biste složili elemente. Na taj način, ako kasnije dodate više elemenata na stranicu, možete ih slagati bez prilagodbe z-indeksnih vrijednosti svih ostalih elemenata. Na primjer:
- 100 za vaš vrhunski element
- 0 za vaš srednji element
- -100 za vaš donji element
Također možete dati dva elementa istu vrijednost z-indeksa. Ako su ti elementi složeni, prikazat će se redom kojim su napisani u HTML-u, a zadnji element na vrhu.
Jedna napomena: za element koji učinkovito koristi svojstvo z-indeksa, mora biti element blokne razine ili upotrijebiti prikaz "blok" ili "inline-block" u vašoj CSS datoteci.
