CSS Düzen - z-index Özelliği

z-index özniteliği, öğenin yığın sırasını belirtir.

z-index özniteliği

Elementler konumlandırıldığında, diğer öğelerle çakışabilirler.

z-index öznitelik, öğenin yığın sırasını belirtir (hangi öğe ön planda, hangi öğe arka planda olmalıdır).

öğenin yığın sırası pozitif veya negatif olabilir:

Bu bir başlıktır

çünkü resmin z-index sıfır, bu yüzden metin arkasında yerleştirilecektir.

örnek

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Kendi Kendine Deneyin

Dikkat:z-index sadecekonumlandırma öğeleri(position: absoluteveposition: relativeveposition: fixed veya position: sticky) veesnek öğe(display: flex öğesinin doğrudan alt öğeleri).

Diğer bir z-index örneği

örnek

Burada, daha büyük yığın sırasına sahip öğelerin her zaman daha küçük yığın sırasına sahip öğelerin üzerinde olduğunu görüyoruz:

<html>
<head>
<style>
.container {
  position: relative;
}
.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Siyah kutu</div>
  <div class="gray-box">Gri kutu</div>
  <div class="green-box">Yeşil kutu</div>
</div>
</body>
</html>

Kendi Kendine Deneyin

durumunda

İki konumlandırma öğesi, z-index belirtilmemiş z-index durumda üst üste gelecekHTML kodunda en son tanımlananöğe en üstte görüntülenecektir.

örnek

Aşağıdaki örnekle aynı, ancak burada belirtilmemiş z-index：

<html>
<head>
<style>
.container {
  position: relative;
}
.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Siyah kutu</div>
  <div class="gray-box">Gri kutu</div>
  <div class="green-box">Yeşil kutu</div>
</div>
</body>
</html>

Kendi Kendine Deneyin

CSS Özellikleri

Özellik Açıklama
z-index Araçların yığın sırasını ayarlamak için.