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 programih Word in PowerPoint uporabljali grafična orodja ali bolj robusten urejevalnik slik, kot je Adobe Photoshop, potem ste verjetno videli kaj 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 teh funkcij nimate, 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 gre za spletno oblikovanje, 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.
Pomislite na elemente na spletni strani kot kosov papirja in spletne strani kot kolaž. Kjer postavljate papir, se določi 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, sledi naslednji najvišji in tako naprej do najnižjega 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 imate pet različnih elementov:
- element A-indeks z -25
- element B - z-indeks 82
- element C - z-indeks ni nastavljen
- element D - z - indeks 10
- element E-indeks z-3
Nastali bodo v naslednjem vrstnem redu:
- element B
- element D
- element C
- element E
- element A
Priporočamo, da uporabite precej različne vrednosti indeksa z-indeksa, da si 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 vaš najvišji element
- 0 za vaš srednji element
- -100 za 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: za element, ki učinkovito uporablja lastnost z-indeksa, mora biti element elementa bloka ali v datoteki CSS uporabiti prikaz "blok" ali "inline-block".
