2 beğenilme 0 beğenilmeme
78 gösterim
Merhaba ,

Css'te z-index nedir tam olarak ve nasıl kullanılır ?

Teşekkürler
5 Temmuz 2017 Css kategorisinde esmadenizkirişçi Senior Developer (1,010 puan) paylaştı | 78 gösterim

1 cevap

1 beğenilme 0 beğenilmeme
En İyi Cevap

Merhaba ,

CSS kodlarını yazarken genellikle elemanları yan yana veya alt alta dizeriz.Elemanları üst üste almak gerektiğinde ise yardımımıza z-index özelliği koşuyor.

z-index

z-index özelliğini en basit anlamıyla “z-index elementleri z-ekseninde nerede duracağını belirler, üstte veya altta. z-indeks değeri küçük olan elementler altta büyük olan elementler ise üstte olucaktır.  şeklinde tanımlayabiliriz.

z-index Uygularken Dikkat Edilmesi Gerekenler

  • z-index sadece position değeri relative, absolute ve fixed olan nesnelere uygulanır.
  • Saydamlık değeri(opacity) 1’den küçük verilen nesnelerde z-index kullanımı daha kolay anlaşılır.

 

Yapısı:z-index: (değer) Aldığı Değerler:<sayısal değer> | auto | inherit
Başlangıç değeri:auto
Uygulanabilen elementler:postion uygulanan elementlere
Kalıtsallık:Yok

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

Konumlandırma değeri relative, absolute ve fixed uygulanmış katmanların görünürlüğünü z-index ile ayarlayabiliriz.

z-index Örneği :

div{
	position:absolute;
	width:150px;
	height:150px;
}

div.kutu1 {
	background: #FEB3BE;
	border:2px solid #CC8B94;
	top: 0;
	left: 0;
}

div.kutu2 {
	background: #E5ECF9;
	border:2px solid #BCCCEB;
	top: 10px;
	left: 10px;
}

Yukarıda örnekte görüldüğü gibi katmanlar üst üste sıralanmıştır.

Birbirinden 10px üst ve 10px soldan mesafe bırakılmıştır.

Üstte kalan katman alttakileri gizlemiştir.

Tüm katmanların z-index değeri atanmamıştır bu nedenle başlangıç değeri olan z-index:auto değerini almışlardır.

<body>
	<div class='kapsul'>
		<div class='kutu1'></div>
		<div class='kutu2'></div>
	</div>
</body>

z-index değeri otomatik olduğu için her katman html’deki sırasına göre yerleşmiştir.

İlk başta yazılmış olanlar altta sonrakiler üstte olacak şekilde sıralanmıştır.

z-index kullanımı

Yukarıda yaptığımız örnekte alttaki kırmızı katmanı üste çıkarmak için z-index değerini 2 verirsek eğer mavi katmanın z-index değerini 1 verirsek katman görünümünü tersine dönecektir.

5 Temmuz 2017 serhat.öcal Uzman Coder (13,370 puan) cevapladı

Verdiğiniz bilgiler için çok teşekkür ederim :)

uzmancoder.com'a Hoşgeldiniz. Sitemiz 24.06.2017 tarihinde kurulan bir soru-cevap platformudur.

Siz de aklınıza takılan soruları sorabilir veya diğer sorulara cevaplar yazabilirsiniz.

BU AY EN AKTİF ÜYELER

    100 soru

    85 cevap

    26 yorum

    416 üye

    ×

    Bizi Takip Edin!

    Bumerang - Yazarkafe

    comodo ssl




    100 soru
    85 cevap
    26 yorum
    416 üye