Css z index

Css z index : Bu bir CSS komutudur ve somut olarak “position” kullanımından sonra çalışmaktadır. Temelde CSS pozisyon değeri olan HTML nesnelerinin görünme önceliğini belirlemek için kullanılmaktadır. Web sitesi yazarken bir çok alanda görüntüleme sırasını belirlemek için numara değeri verebilirsiniz. Sayı yükseldikçe öne çıkma da o kadar artmaktadır.

Not: z-index değeri 99 olan bir obje değeri 9 olan objeden daha önde olarak görüntülenmektedir.

z-index değer verme ve hangi durumlarda çalışır hale geldiğini sizlerle örnekli bir şekilde inceleyeceğiz. Aşağıda sizler için bu konuyla alaka örneker yapıyorum HTML ve CSS kodları teker teker paylaşıyorum. Kodları inceleyerek fikir sahibi olabilirsiniz.

Örnek:

.sinif{
   z-index : 999;
}
z index ne işe yarar?
z index ne işe yarar?

Css z index Ne işe Yarar?

HTML bölümünde kullanılan ve CSS kodu ile birlikte senkron çalışan bu özellik sayfanızın içinde etiketlerin önceliği durumunda arkada kalan veya bir objenin diğer üstüne çıkması durumunda öne alma işlemi için kullanılmaktadır. Aşağıda hangi işlemlerde ne işe yaradığını maddeler halinde yazıyorum.

  • Fotoğrafın bir Div’in arkasında olması.
  • Bir butonun herhangi bir objenin arkasında olması.
  • Objeleri konumlandırma işlemleri.
  • Yeniden görüntüleme önceliği belirleme.

Css z index Kullanımı

HTML ve CSS kodları kullanarak sizlere z-index kullanımını göstermek istiyorum. Bunun içinde önemli bir hatırlatma yapmakta fayda olduğunu düşünüyorum. z-index doğru kullanımı için position kullanımı yapmanız gerekmektedir. Onun dışında etkin bir kullanım alma ihtimaliniz düşecektir.

css z-index kullanımı
css z-index kullanımı

CSS Kodu:

.kutucuk-2{
	position:absolute;
	left:0;
	top:0;
	width:200px;
	height:200px;
	background:#3bb0fa;
	z-index:9;
}
.kutucuk-1{
	position:absolute;
	left:0;
	top:0;
	width:100px;
	height:100px;
	background:#0072bc;
	z-index:99;
}

Açıklama: 2 adet sınıf tanımlayıp bunların içinde position kullanıp ardında z-index parametresini ekledim. Yukarıdaki CSS örneğini de incelerseniz tam olarak ne yapmaya çalıştığımı anlatabilirsiniz.

HTML Kodu:

<div class="kutucuk-1"></div>
<div class="kutucuk-2"></div>

Açıklama: İki div nesnesine de pozisyon değerleri tanımlanıyor ve görünme sıraları yani z-index değerleri veriliyor. Verilen bu değerler de de hangisinin önde olacağının z-index parametresinin büyüklüğüne göre karar veriliyor.

 

Bu ve bunun gibi tüm Web hakkındaki her şeyi bana aşağıdaki form üzerinden sorularınızı dilediğiniz gibi sorabilirsiniz. Sizlere en kısa süre içinde doğru cevabı vermeye çalışacağım. Şimdide hepinize iyi çalışmalar diliyorum.

Css z index