Elementi preklapanja pozicioniranja s kaskadnim stilskim listovima
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 više robusnih editor 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 Photoshopu 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 riječ o web dizajnu, 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.
Volim razmišljati o elementima na web stranici kao komadi papira i samu web stranicu kao kolažu. Gdje položim papir određuje se pozicioniranjem, a koliko je ostalih elemenata pokriveno 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 je na vrhu, a slijede sljedeć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 imam pet različitih elemenata:
- element 1 - z-indeks od -25
- element 2 - z-indeks od 82
- element 3 - z-indeks nije postavljen
- element 4 - z-indeks od 10
- element 5 - z-indeks od -3
Oni će se slagati u sljedećem redoslijedu:
- element 2
- element 4
- element 3
- element 5
- element 1
Preporučujem upotrebu znatno različitih 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 moj vrhunski element
- 0 za moj srednji element
- -100 za moj 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 blok razine ili koristiti prikaz "blok" ili "inline-block" u vašoj CSS datoteci.
Izvorni članak Jennifer Krynin. Uredio / la 12/09/16 Jeremy Girard.