Postavitev prekrivajočih elementov s kaskadnimi slogovnimi sličicami
Eden od izzivov pri uporabi pozicioniranja CSS za postavitev spletne strani je, da se lahko nekateri elementi prekrivajo z drugimi. To je v redu, če želite, da je zadnji element v HTML-u na vrhu, a če pa ne, ali če želite, da elementi, ki se trenutno ne prekrivajo z drugimi, to storijo, ker načrt zahteva ta " ? Če želite spremeniti način prekrivanja elementov, morate uporabiti lastnost CSS.
Če ste v Wordu in PowerPointu uporabljali grafična orodja ali bolj robusten urejalnik slik, kot je Adobe Photoshop, potem je verjetno, da ste videli nekaj podobnega kot z-indeks v akciji. V teh programih lahko označite predmete, ki ste jih sestavili, in izberite možnost »Pošlji nazaj« ali »Spredaj« na določene elemente vašega dokumenta. V Photoshopu nimate teh funkcij, vendar imate podokno »Layer« programa in lahko uredite, kje element pade na platno, tako da jih preuredite. V obeh teh primerih v bistvu nastavljate z-indeks teh objektov.
Kaj je z-indeks?
Ko uporabljate pozicioniranje CSS, da bi postavili elemente na strani, morate razmišljati v treh dimenzijah. Obstajata dve standardni dimenziji: levo / desno in zgoraj / spodaj. Indeks levo-desno je znan kot x-indeks, od vrha do dna pa y-indeks. Tako boste pozicionirali elemente vodoravno ali navpično, z uporabo teh dveh indeksov.
Ko pride do spletnega oblikovanja, je tudi vrstni red strani. Vsak element na strani je lahko nadalje ali pod katerim koli drugim elementom. Lastnost z-indeks določa, kje v vsakem elementu je sklad. Če sta x-indeks in y-indeks vodoravna in navpična črta, je z-indeks globina strani, v bistvu tretja dimenzija.
Rad elementov na spletni strani rad razmišljam kot koščke papirja in spletno stran samega kot kolaž. Kjer postavljam papir, je določen s pozicioniranjem, in koliko jih pokrivajo drugi elementi, je indeks z-indeksa.
Z-indeks je število, bodisi pozitivno (npr. 100) ali negativno (npr. -100). Privzeti indeks z-indeksa je 0. Element z najvišjim indeksom z-indeksa je na vrhu, nato pa naslednji najvišji in tako naprej do najnižjega indeksa z-indeksa. Če imata dva elementa enako vrednost indeksa z-indeksa (ali pa nista definirana, kar pomeni, da je uporabljena privzeta vrednost 0), jih bo brskalnik obesil v vrstnem redu, kot je prikazan v HTML-ju.
Kako uporabljati z-indeks
Vsakemu elementu, ki ga želite, v svojem naboru dajte drugačno vrednost z indeksom. Na primer, če imam pet različnih elementov:
- element 1 - z-indeks -25
- element 2 - z-indeks 82
- element 3 - z-indeks ni nastavljen
- element 4 - z-indeks 10
- element 5 - z-indeks -3
Nastali bodo v naslednjem vrstnem redu:
- element 2
- element 4
- element 3
- element 5
- element 1
Priporočam uporabo zelo različnih vrednosti z-indeksa, da lahko zložite svoje elemente. Na ta način, če na stran dodate več elementov kasneje, imate prostor, da jih prilepite, ne da bi morali prilagoditi vrednosti indeksa z-indeksov vseh drugih elementov. Na primer:
- 100 za moj najvišji element
- 0 za moj srednji element
- -100 za moj spodnji element
Dva elementa lahko daste isto vrednost z indeksom. Če so ti elementi zloženi, bodo prikazani v zaporedju, v katerem so napisani v HTML, z zadnjim elementom na vrhu.
Ena opomba: element, ki učinkovito uporablja lastnost z-indeksa, mora biti element elementa bloka ali v datoteki CSS uporabiti prikaz "blok" ali "inline-block".
Izvorni članek Jennifer Krynin. Uredi dne 12.9.1916 z Jeremy Girard.