Z-index
Uygulanan elementin z-eksenindeki konumunu belirler.Her elemente z-index uygulanmaz ve gereksinim duyulmaz.Aslında konumlandırma değeri verilen elementlere z-index uygulamamız gerekir.z-index in asıl anlamı elementin altta yada üstte kalmasını belirler.
Destekleyen tarayıcılar;
- Firefox
- Chrome
- Safari
- Opera
- İnternet Explorer
- Mobil Tarayıcılar
- iOS Safari
- Opera Mobile
- Android Browser
Örnek CSS :
Konumlandırma değeri relative, absolute ve fixed uygulanmış katmanların görünürlüğünü z-index ile ayarlayabiliriz..kutu-temp{
width:200px;
height:200px;
position:absolute;
}
.kutu1 {
background: #333;
border:2px solid #000;
top: 0;
left: 0;
z-index:2
}
.kutu2 {
background: #d90000;
top: 10px;
left: 10px;
z-index:1 ;
html:
<body>
<div class='kutu-temp'>
<div class='kutu1'></div>
<div class='kutu2'></div>
</div>
</body>
Yukardaki örnekte verildiği gibi kutu-temp class ının içerisine 2 adet div konulmustur.kutu2 classına belli olması için yukarıdan ve soldan 10px boşluk verilmiştir.kutu1 class ının z-index ine 2px değer verildiği için kutu2 class ının ustunde kalacaktır.
0 yorum: