CSS Düzeni - Z-endeksi Özelliği
Özellik z-index
, bir elemanın yığın sırasını belirtir.
Z-endeksi Özelliği
Elemanlar yerleştirildiğinde, diğer elemanlarla örtüşebilir.
Özellik z-index
, bir öğenin yığın sırasını belirtir (hangi öğe diğerlerinin önüne veya arkasına yerleştirilmelidir).
Bir öğenin pozitif veya negatif yığın sırası olabilir:
Bu bir başlık
Görüntünün z-endeksi -1 olduğu için metnin arkasına yerleştirilecektir.
Örnek
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Not: z-index
yalnızca konumlandırılmış öğeler (konum: mutlak, konum: göreli, konum: sabit veya konum: yapışkan) ve esnek öğeler
(gösterinin doğrudan çocukları olan öğeler: esnek öğeler) üzerinde çalışır.
Başka bir z-endeksi Örneği
Örnek
Burada daha büyük yığın sırasına sahip bir elemanın her zaman daha düşük yığın sırasına sahip bir elemanın ü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">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
z-endeksi olmadan
Konumlandırılmış iki öğe belirtilmeden üst üste gelirse , HTML kodunda en sonz-index
tanımlanan öğe en üstte gösterilecektir.
Örnek
Yukarıdakiyle aynı örnek, ancak burada z-endeksi belirtilmemiş:
<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">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
CSS Özelliği
Property | Description |
---|---|
z-index | Sets the stack order of an element |