Yksi haasteista, kun käytät CSS-paikannusta web-sivun asettelua varten, on, että osa elementeistasi saattaa olla päällekkäisiä muiden kanssa. Tämä toimii hyvin, jos haluat, että HTML-elementin viimeinen elementti on ylhäällä, mutta mitä jos et halua tai jos haluat, että elementtejä, jotka eivät tällä hetkellä päällekkäisiä muiden kanssa, tekevät niin, koska malli vaatii tätä "kerrostettua" ulkoasua ? Jotta muutat elementtien päällekkäisyyttä, sinun on käytettävä CSS: n ominaisuutta.
Jos olet käyttänyt näytönohjaimia Wordissa ja PowerPointissa tai vankempana kuvankäsittelyohjelmana, kuten Adobe Photoshopissa, niin oletko nähnyt jotain z-indeksistä toimintaa. Näissä ohjelmissa voit korostaa piirrettyjä objekteja ja valita vaihtoehdon "Lähetä takaisin" tai "Tuoda eteenpäin" tiettyjä asiakirjan osia. Photoshopissa sinulla ei ole näitä toimintoja, mutta sinulla on ohjelman "Layer" -ruutu ja voit järjestää, missä elementti pudotetaan kankaalle järjestämällä nämä kerrokset uudelleen. Molemmissa näissä esimerkeissä olet itse määrittämässä näiden kohteiden z-indeksin.
Mikä on Z-indeksi?
Kun käytät CSS-paikannusta sijoittamalla sivuosi elementtejä, sinun täytyy ajatella kolmessa ulottuvuudessa. Siinä on kaksi standardimateriaalia: vasen / oikea ja ylhäältä / alhaalta. Vasempaan ja oikeaan indeksiin kutsutaan x-indeksi, kun taas ylhäältä alhaalta yksi on y-indeksi. Näin voit sijoittaa elementit vaakasuoraan tai pystysuoraan käyttämällä näitä kahta indeksiä.
Web-suunnittelussa on myös sivun pinoamisjärjestys. Jokainen sivun elementti voi kerrostua minkä tahansa muun elementin yläpuolella tai alapuolella. Z-indeksiominaisuus määrittää, missä pinoissa kukin elementti on. Jos x-indeksi ja y-indeksi ovat horisontaalisia ja pystysuoria viivoja, niin z-indeksi on sivun syvyys, pääasiassa kolmas ulottuvuus.
Ajattele web-sivujen elementtejä papereina ja verkkosivu itse kollaasina. Jos sijoitat paperin määräytyvän paikannuksen avulla, ja kuinka paljon sitä käsitellään muiden elementtien avulla, on z-indeksi.
- Z-indeksi on numero, joko positiivinen (esim. 100) tai negatiivinen (esim. -100).
- Oletusarvo z-indeksi on 0.
Elementti, jolla on korkein z-indeksi, on ylhäällä, seuraa seuraava korkein ja niin alas alin z-indeksi. Jos kahdella elementillä on sama z-indeksin arvo (tai sitä ei ole määritelty, eli käytä oletusarvoa 0), selain kertoo ne HTML-koodin mukaisessa järjestyksessä.
Kuinka käyttää Z-indeksiä
Anna jokaiselle haluamallesi elementille pinoon eri z-indeksin arvo. Jos sinulla on esimerkiksi viisi eri elementtiä:
- elementti A-z-indeksi -25
- elementti B - z-indeksi 82
- elementti C - z-indeksi ei asetettu
- elementti D - z-indeksi 10
- elementti E - z-indeksi -3
Ne pinoavat seuraavassa järjestyksessä:
- elementti B
- elementti D
- elementti C
- elementti E
- elementti A
On suositeltavaa käyttää erittäin erilaisia z-indeksin arvoja elementtien pinoamiseen. Jos lisäät sivulle lisää elementtejä myöhemmin, sinulla on tilaa kerätä ne, mutta ei tarvitse säätää kaikkien muiden elementtien z-indeksin arvoja. Esimerkiksi:
- 100 ylimpään osaan
- 0 keskiosaa varten
- -100 pohjaelementtiin
Voit myös antaa kahdelle elementille saman z-indeksin arvon. Jos nämä elementit on pinottu, ne näkyvät siinä järjestyksessä, että ne on kirjoitettu HTML-muotoon, ja viimeinen elementti on päälle.
Yksi huomautus: jos elementti käyttää tehokkaasti z-indeksin ominaisuutta, sen täytyy olla lohkotasoinen elementti tai käyttää CSS-tiedostossa "lohko" tai "inline-lohko" -näyttöä.
