CSS asettelu - z-index ominaisuus

z-index ominaisuus määrittää elementin kerroksellisuusjärjestys.

z-index ominaisuus

Kun elementti on sijoitettu, ne voivat päällekkäistyä muiden elementtien kanssa.

z-index ominaisuus määrittää elementin kerroksellisuusjärjestys (mikä elementti näytetään edellä, mikä elementti näytetään taakse).

elementin kerroksellisuusjärjestys voi olla positiivinen tai negatiivinen:

Tämä on otsikko

Koska kuvan z-index arvo -1, joten se sijoitetaan tekstin taakse.

esimerkki

img {
  sijainti: absoluuttinen;
  vasen: 0px;
  ylä: 0px;
  z-index: -1;
}

Kokeile itse

Huomaa:z-index soveltuu vainsijoitettu elementti(sijainti: absoluuttinen,sijainti: suhteellinen,sijainti: kiinteä tai sijainti: kiinnitetty) jajoustavat projektit(display: flex elementin välittömät lapsielementit).

Toinen z-index-esimerkki

esimerkki

Tässä näemme, että suuremmalla kerroksellisuusjärjestyksellä varustetut elementit sijaitsevat aina pienemmällä kerroksellisuusjärjestyksellä varustettujen elementtien yläpuolella:

<html>
<head>
<style>
.container {
  sijainti: suhteellinen;
}
.black-box {
  sijainti: suhteellinen;
  z-index: 1;
  reuna: 2px kiiltävä musta;
  korkeus: 100px;
  margin: 30px;
}
.gray-box {
  sijainti: absoluuttinen;
  z-index: 3;
  tausta: vaaleasivelti;
  korkeus: 60px;
  leveys: 70%;
  vasen: 50px;
  ylä: 50px;
}
.green-box {
  sijainti: absoluuttinen;
  z-index: 2;
  tausta: vaaleansininen;
  leveys: 35%;
  vasen: 270px;
  top: -15px;
  korkeus: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Musta laatikko</div>
  <div class="gray-box">Harmaa laatikko</div>
  <div class="green-box">Vihreä laatikko</div>
</div>
</body>
</html>

Kokeile itse

ei z-index

Jos kaksi sijoitettua elementtiä ei ole määritelty z-index tilanteessa päällekkäinHTML-koodin viimeisenä määritellynelementti näytetään ylimmäisenä.

esimerkki

Yhteinen edellä olevan esimerkin kanssa, mutta tässä ei määritetty z-index：

<html>
<head>
<style>
.container {
  sijainti: suhteellinen;
}
.black-box {
  sijainti: suhteellinen;
  reuna: 2px kiiltävä musta;
  korkeus: 100px;
  margin: 30px;
}
.gray-box {
  sijainti: absoluuttinen;
  tausta: vaaleasivelti;
  korkeus: 60px;
  leveys: 70%;
  vasen: 50px;
  ylä: 50px;
}
.green-box {
  sijainti: absoluuttinen;
  tausta: vaaleansininen;
  leveys: 35%;
  vasen: 270px;
  top: -15px;
  korkeus: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Musta laatikko</div>
  <div class="gray-box">Harmaa laatikko</div>
  <div class="green-box">Vihreä laatikko</div>
</div>
</body>
</html>

Kokeile itse

CSS ominaisuudet

Ominaisuus Kuvaus
z-index Aseta elementin kerrosjärjestys.