div ( z-index: 1; /* integer */ )z-indexOminaisuus CSS ohjaa pystysuoran pinoamisjärjestystä elementtejä, jotka menevät päällekkäin. Kuten kuvassa, kumpi näyttää siltä kuin se olisi fyysisesti lähempänä sinua. z-indexvaikuttaa vain elementteihin, joiden sijainti-arvo on muu kuin static(oletus).
Elementit voivat olla päällekkäisiä useista syistä, esimerkiksi suhteellinen sijoittelu on työntänyt sen johonkin muuhun. Negatiivinen marginaali on vetänyt elementin toisen yli. Ehdottomasti sijoitetut elementit menevät päällekkäin. Kaikenlaisia syitä.
Ilman z-indexarvoa elementit pinotaan siinä järjestyksessä kuin ne näkyvät DOM: ssä (alin alaspäin samalla hierarkiatasolla näkyy ylhäällä). Elementit, joissa on ei-staattinen paikannus, näkyvät aina niiden elementtien päällä, joilla on oletusarvoinen staattinen sijoittelu.
Huomaa myös, että pesinnällä on suuri rooli. Jos elementti B istuu elementin A päällä, elementin A lapsielementti ei voi koskaan olla korkeampi kuin elementti B.
Huomaa, että IE: n vanhemmassa versiossa tämä kontekstivara on hieman ruuvattu. Tässä on jQuery-korjaus siihen.
Lisää tietoa
- Screencast: Kuinka z-indeksi toimii
- MDN-dokumentit
- Kattava artikkeli: Z-indeksin ymmärtäminen
- Rationaaliset z-indeksiarvot
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | Toimii | Toimii | Toimii | 4+ | 4+ | Toimii |