Pozicioniranje preklapajućih elemenata sa kaskadnim stilskim listovima
Jedan od izazova prilikom korišćenja CSS pozicioniranja za postavljanje web stranice jeste da neki od vaših elemenata mogu da se preklapaju sa drugima. Ovo dobro funkcioniše ako želite da zadnji element u HTML-u bude na vrhu, ali šta ako ne želite ili šta ako želite da imate elemente koji trenutno ne preklapaju druge da to učine, jer dizajn zahteva ovaj "slojeviti" izgled ? Da biste promijenili način preklapanja elemenata, potrebno je koristiti osobinu CSS-a.
Ako ste koristili grafičke alate u programu Word i PowerPoint ili robusnijim uređivačima slika kao što je Adobe Photoshop, onda su šanse da ste videli nešto poput z-indeksa u akciji. U ovim programima možete istaknuti predmete koje ste nacrtali i izaberite opciju "Pošalji nazad" ili "Dovrši napred" određenih elemenata vašeg dokumenta. U Photoshop-u, nemate ove funkcije, ali imate okno "Layer" programa i možete urediti gdje element pada na platnu preuređivanjem ovih slojeva. U oba ova primera, vi u suštini postavljate z-indeks ovih objekata.
Šta je z indeks?
Kada koristite CSS pozicioniranje da pozicionirate elemente na stranici, morate razmišljati u tri dimenzije. Postoje dve standardne dimenzije: levo / desno i gornje / donje. Indeks levo-desno je poznat kao x-indeks, dok je gornji do donji indeks y-indeks. Ovako bi pozicionirali elemente horizontalno ili vertikalno, koristeći ova dva indeksa.
Kada dođe do web dizajna, postoji i redosled slaganja stranice. Svaki element na stranici može biti slojevit iznad ili ispod bilo kog drugog elementa. Značaj z-indeksa određuje gde je u stacku svaki element. Ako su x-indeks i y-indeks horizontalne i vertikalne linije, onda je z-indeks dubina stranice, u suštini treća dimenzija.
Ja volim da razmišljam o elementima na web stranici kao dela papira, a samu web stranicu kao kolaž. Gde postavljam papir određujem pozicioniranjem, a koliko je od ostalih elemenata pokriveno je z-indeks.
Z-indeks je broj, bilo pozitivan (npr. 100) ili negativan (npr. -100). Podrazumevani z-indeks je 0. Element sa najvišim indeksom z-indeksa je na vrhu, a zatim sledeći najviši i tako dalje do najnižeg z-indeksa. Ako dva elementa imaju istu vrijednost z-indeksa (ili nije definisana, što znači korištenje podrazumevane vrijednosti od 0), pretraživač će ih slojiti po redosledu koji se pojavljuje u HTML-u.
Kako koristiti Z-indeks
Dajte svakom elementu koji želite u vašem stacku drugačiju vrednost z-indeksa. 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 podešen
- element 4 - z-indeks od 10
- element 5 - z-indeks -3
Staviće se u sledeći red:
- element 2
- element 4
- element 3
- element 5
- element 1
Preporučujem da koristite znatno različite vrijednosti z-indeksa kako biste stakli svoje elemente. Na taj način, ako kasnije dodate više elemenata na stranicu, imajte prostora da ih slojete bez podešavanja vrednosti z-indeksa svih ostalih elemenata. Na primjer:
- 100 za moj vrhunski element
- 0 za moj srednji element
- -100 za moj donji element
Takođe možete dati dva elementa istoj vrijednosti z-indeksa. Ako su ovi elementi složeni, oni će se prikazati u redosledu koji su napisani u HTML-u, sa poslednjim elementom na vrhu.
Jedna napomena, za element koji efikasno koristi svojstvo z-indeksa, mora biti element elementa bloka ili koristiti u okviru CSS datoteke prikaz ekrana "blok" ili "inline-block".
Originalni članak Jennifer Krynin. Uredio Jeremy Girard 12.9.16.