Päällekkäisten elementtien sijoittaminen Cascading-tyyppisiin arkkeihin
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 Word- ja PowerPoint-näytönohjaimia tai vankempia kuvankäsittelyohjelmia, kuten Adobe Photoshopia, niin olet todennäköisesti nähnyt jotain z-indeksiä toiminnassa. 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ää, mihin osa kuuluu kudokseen, 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ä.
Kun web-suunnittelu tulee, 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.
Haluan ajatella verkkosivujen elementtejä paperileikkeinä ja verkkosivu itse kollaaseina. Missä asetan paperin määräytyy sijoittamalla, ja kuinka paljon sitä peittää muut elementit, 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ä, jonka jälkeen 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. Esimerkiksi, jos minulla on viisi eri elementtiä:
- elementti 1 - z-indeksi -25
- elementti 2 - z-indeksi 82
- elementti 3 - z-indeksi ei asetettu
- elementti 4 - z-indeksi 10
- elementti 5 - z-indeksi -3
Ne pinoavat seuraavassa järjestyksessä:
- elementti 2
- elementti 4
- elementti 3
- elementti 5
- elementti 1
Suosittelen käyttämään hyvin erilaisia z-indeksin arvoja pinoamaan elementtejäsi. 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 ylimmästä elementistäni
- 0 keskiosaan
- -100 minun pohjaelementtini
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, jotta elementti tehokkaasti käyttää z-indeksin ominaisuutta, sen on oltava lohkotasoinen elementti tai käytä CSS-tiedostossa olevaa "lohkon" tai "inline-lohkon" näyttöä.
Alkuperäinen artikkeli Jennifer Krynin. Edited on 12/09/16, jonka teki Jeremy Girard.