Z-indeksi CSS: ssä

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ä:

Ne pinoavat seuraavassa järjestyksessä:

  1. elementti 2
  2. elementti 4
  3. elementti 3
  4. elementti 5
  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:

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.