Skip to content

Kuinka käyttää Z-indeksiä CSS: ssä

24 de kesäkuu de 2021

Yksi haasteista CSS-paikannuksen käyttämisessä verkkosivujen asetteluun on, että jotkut elementit voivat olla päällekkäisiä toisten kanssa. Tämä toimii hyvin, jos haluat HTML: n viimeisen elementin olevan ylhäällä, mutta entä jos et tai jos haluat, että elementit, jotka eivät tällä hetkellä ole päällekkäisiä muiden kanssa, tekisivät niin, koska suunnittelu vaatii tätä ”kerrostettua” ulkoasua ? Jos haluat muuttaa elementtien päällekkäisyyttä, sinun on käytettävä CSS: n z-index-ominaisuutta. Jos olet käyttänyt grafiikkatyökaluja Wordissa ja PowerPointissa tai tehokkaammassa kuvankäsittelyohjelmassa, kuten Adobe Photoshop, olet todennäköisesti nähnyt jotain z-indeksin kaltaista toiminnassa. Näissä ohjelmissa voit korostaa piirtämäsi objektit ja valita vaihtoehdon Lähetä takaisin tai Tuo eteen tietyt asiakirjan osat. Photoshopissa sinulla ei ole näitä toimintoja, mutta sinulla on ohjelman ”Taso” -ruutu ja voit järjestää, missä elementti putoaa kankaalle järjestämällä nämä kerrokset uudelleen. Molemmissa esimerkeissä asetat olennaisesti näiden objektien z-indeksin.

Mikä on Z-indeksi?

Kun käytät CSS-paikannusta elementtien sijoittamiseen sivulle, sinun on ajateltava kolmessa ulottuvuudessa. Vakiomittoja on kaksi: vasen / oikea ja ylä / ala. Vasemmalta oikealle -indeksi tunnetaan nimellä x-indeksi, kun taas ylhäältä alaspäin oleva indeksi on y-indeksi. Näin sijoitat elementit vaaka- tai pystysuunnassa käyttämällä näitä kahta hakemistoa. Web-suunnittelussa on myös sivun pinoamisjärjestys. Jokainen sivun elementti voidaan kerrostaa minkä tahansa muun elementin ylä- tai alapuolelle. Z-indeksiominaisuus määrittää, missä pinossa kukin elementti on. Jos x-indeksi ja y-indeksi ovat vaaka- ja pystyviivat, niin z-indeksi on sivun syvyys, olennaisesti kolmas ulottuvuus. Ajattele verkkosivun elementtejä paperinpaloina ja itse verkkosivua kollaasina. Paperin asettamispaikka määräytyy paikannuksen perusteella, ja kuinka suuri osa siitä on muiden elementtien peitossa, on z-indeksi.

  • Z-indeksi on luku, joko positiivinen (esim. 100) tai negatiivinen (esim. -100).
  • Oletusarvoinen z-indeksi on 0.

Korkeimman z-indeksin omaava elementti on ylhäällä, sen jälkeen seuraava korkein ja niin edelleen alimpaan z-indeksiin asti. Jos kahdella elementillä on sama z-indeksiarvo (tai sitä ei ole määritelty, eli käytä oletusarvoa 0), selain kertoo ne HTML-järjestyksessä näkyvässä järjestyksessä.

Kuinka käyttää Z-hakemistoa

Anna jokaiselle pinoosi haluamallesi elementille eri z-indeksiarvo. Jos sinulla on esimerkiksi viisi eri elementtiä:

  • elementti A – z-indeksi -25
  • elementti B – z-indeksi 82
  • elementti C – z-indeksiä ei ole asetettu
  • elementti D – z-indeksi 10
  • elementti E – z-indeksi -3

He pinoavat seuraavassa järjestyksessä:

  1. elementti B
  2. elementti D
  3. elementti C
  4. elementti E
  5. elementti A

Elementtien pinoamiseen on suositeltavaa käyttää huomattavasti erilaisia ​​z-indeksiarvoja. Tällä tavalla, jos lisäät sivulle lisää elementtejä myöhemmin, sinulla on tilaa kerrosta niitä tarvitsematta säätää kaikkien muiden elementtien z-indeksiarvoja. Esimerkiksi:

  • 100 ylimmälle elementillesi
  • 0 keskiosalle
  • -100 alaosallesi

Voit myös antaa kahdelle elementille saman z-indeksiarvon. Jos nämä elementit on pinottu, ne näkyvät HTML-koodiin kirjoitetussa järjestyksessä viimeisen elementin ollessa päällä. Jotta elementti voi käyttää z-index-ominaisuutta tehokkaasti, sen on oltava lohkotason elementti tai käytettävä ”block” tai ”inline-block” -näyttöä CSS-tiedostossa.

Alusta mla apa chicago Sinun viitteesi

Kyrnin, Jennifer. ”Kuinka käyttää Z-indeksiä CSS: ssä.” ThoughtCo, toukokuu. 14, 2021, thinkco.com/z-index-in-css-3464217.
Kyrnin, Jennifer. (2021, 14. toukokuuta). Kuinka käyttää Z-indeksiä CSS: ssä. Haettu osoitteesta https://www.thoughtco.com/z-index-in-css-3464217
Kyrnin, Jennifer. ”Kuinka käyttää Z-indeksiä CSS: ssä.” ThoughtCo. https://www.thoughtco.com/z-index-in-css-3464217 (käytetty 24. kesäkuuta 2021).