CSS z-index-ominaisuus
- edellinen sivu writing-mode
- Seuraava sivu zoom
Määrittely ja käyttö
Z-index-ominaisuus asettaa elementin kerrosjärjestyksen. Korkeamman kerrosjärjestyksen omaavat elementit ovat aina edellä matalamman kerrosjärjestyksen omaavia elementtejä.
Huomautus:Elementillä voi olla negatiivinen z-index-arvo.
Huomautus:Z-index toimii vain sijoitetuilla elementeillä (esim. position:absolute;)
Selitys
Tämä ominaisuus asettaa sijoitetun elementin sijainnin z-akselin suhteen, jossa z-akseli määritellään pystysuuntaiseksi akseliksi, joka ulottuu näyttöalueeseen. Jos arvo on positiivinen, se on lähempänä käyttäjää, ja jos arvo on negatiivinen, se on kauempana käyttäjäästä.
Katso myös:
CSS-opas:CSS-sijoittelu
HTML DOM -viittausopas:zIndex-ominaisuus
Esimerkki
Aseta kuvan z-index:
img { position:absolute; left:0px; top:0px; z-index:-1; }
CSS-kieli
z-index: auto|number|initial|inherit;
Ominaisuuden arvo
Arvo | Kuvaus |
---|---|
auto | Oletus. Kerrosjärjestys on sama kuin vanhemman elementin. |
number | Asetetaan elementin kerrosjärjestys. |
inherit | Määritellään, että z-index-ominaisuuden arvo tulisi perittää vanhemmalta elementiltä. |
Tekninen yksityiskohta
Oletusarvo: | auto |
---|---|
Perinnäisyys: | ei |
Versio: | CSS2 |
JavaScript-kieli: | object.style.zIndex="1" |
Lisää esimerkkejä
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen selausselaimen versio, joka täysin tukee kyseistä ominaisuutta.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
- edellinen sivu writing-mode
- Seuraava sivu zoom