Z-index - atrybut z-index CSS

z-index atrybut określa porządek układu elementu.

atrybut z-index

Kiedy elementy są pozycjonowane, mogą się nachodzić na inne elementy.

z-index atrybut określa porządek układu elementu (który element powinien być przed, który za).

porządek układu elementu może być liczbą pozytywną lub ujemną:

To jest tytuł

ponieważ obraz z-index ustawiona na -1, więc zostanie umieszczona za tekstem.

przykład

img {
  pozycja: absolutna;
  lewa: 0px;
  górna: 0px;
  z-index: -1;
}

Spróbuj sam

Uwaga:z-index aplikuje się tylko doelementy pozycjonowane(pozycja: absolutna,pozycja: względna,pozycja: stała lub pozycja: lepka) ielastyczne elementy(wyświetlanie: flex bezpośrednie podelementy elementu).

inny przykład z-index

przykład

W tym przypadku widzimy, że elementy o większym porządku układu zawsze znajdują się nad elementami o mniejszym porządku układu:

<html>
<head>
<style>
.kontener {
  pozycja: względna;
}
.czarna-box {
  pozycja: względna;
  z-index: 1;
  granica: 2px solid czarny;
  height: 100px;
  margin: 30px;
}
.szara-box {
  pozycja: absolutna;
  z-index: 3;
  tło: jasnoszara;
  wysokość: 60px;
  szerokość: 70%;
  lewa: 50px;
  górna: 50px;
}
.zielona-box {
  pozycja: absolutna;
  z-index: 2;
  tło: jasnozielona;
  szerokość: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>
</body>
</html>

Spróbuj sam

nie ma z-index

jeśli dwa elementy pozycjonowane nie mają z-index w przypadku nadkładania sięOstatnio zdefiniowany w kodzie HTMLelement będzie wyświetlany na górze.

przykład

Jak powyżej, ale tutaj nie określono z-index：

<html>
<head>
<style>
.kontener {
  pozycja: względna;
}
.czarna-box {
  pozycja: względna;
  granica: 2px solid czarny;
  height: 100px;
  margin: 30px;
}
.szara-box {
  pozycja: absolutna;
  tło: jasnoszara;
  wysokość: 60px;
  szerokość: 70%;
  lewa: 50px;
  górna: 50px;
}
.zielona-box {
  pozycja: absolutna;
  tło: jasnozielona;
  szerokość: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>
</body>
</html>

Spróbuj sam

Atrybut CSS

Atrybut Opis
z-index Ustawienie kolejności układania elementów.