CSS z-index-ominaisuus

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;
  }

Kokeile itse

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ä

Z-index
Z-index voidaan käyttää elementin sijoittamiseen toisen elementin jälkeen.
Z-index
Esimerkissä oleva elementti on muuttanut Z-indexin.

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