css z-index özelliği, html elementinin katman sırasını belirlemek için kullanılır. Yani üst üstte gelen elementlerin hangisinin üstte hangisinin altta olacağını belirliyoruz.
Aldığı değerler :
auto : Otomatik değer .
number : Sayısal değer. ( En büyük değere sahip eleman en üstte olur)
initial : Varsayılan değere çevirir.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.one, .two{
width: 500px;
height: 150px;
position: relative;
border: 1px solid red;
margin-bottom: 10px;
}
div {
width: 200px;
height: 60px;
line-height: 60px;
color: white;
}
.one .first {
position: absolute;
top: 10px;
left: 10px;
background-color: blue;
}
.one .second {
position: absolute;
top: 50px;
left: 60px;
background-color: blueviolet;
}
.one .third {
position: absolute;
top: 90px;
left: 130px;
background-color: brown;
}
.two .first {
position: absolute;
top: 10px;
left: 10px;
background-color: blue;
z-index: 3;
}
.two .second {
position: absolute;
top: 50px;
left: 60px;
background-color: blueviolet;
z-index: 2;
}
.two .third {
position: absolute;
top: 90px;
left: 130px;
background-color: brown;
z-index: 1;
}
</style>
</head>
<body>
<div class="one">
<div class="first">FIRST</div>
<div class="second">SECOND</div>
<div class="third">THIRD</div>
</div>
<div class="two">
<div class="first">FIRST</div>
<div class="second">SECOND</div>
<div class="third">THIRD</div>
</div>
</body>
</html>Html çıktısı:
Örnekte görüldüğü gibi position değeri absolute olan elemanlar üst üst geliyor. Bu durumlarda elemanların sıralaması olması gerektiğinde z-index özelliği kullanıyoruz.
Başka bir yazımızda görüşmek üzere…
