Css z-index elementi nedir ? nasıl kullanılır ?

Css kodlarımızda bu zaman kadar hep yanyana alt alta sıraladık ama günümüz tasarımlarında bu sıralamalar bizlere yetmemeye başladı ve artık dinamik bir resim gölgesi yapıyorsak bile bu gölge div’ini z-index ile resimin üstüne yerleştiriyoruz ve resim ne kadar değişirse değişisin bizim belirlediğimiz gölgeli z-index div’i altında çıkıyor.

Açıkcası z-index z ekseninde yani üst üste,  alt alta divleri yerleştirmemizi sağlıyor ancak z-index’i kullanabilmemiz için öncelikle  position özelliği vermemiz lazım yoksa z-index değeri çalışmayacaktır. Hemen örneklere geçelim.

Şimdi bir cerceve div’i içinde kutuBir ve kutuIki diye kutucuklar oluşturup birini sola biri sağla yaslayalım.

Css kodları :

Html kodları:

Şimdi kutucuklarımızdan  z-index değerini vermeden önce z-index değerinim çalışması için position:absolute; ve kafamıza göre top ve left komutlarını vereceğiz.

Css kodları :

Görmüş olduğumuz üzere position absolute değerini verdik ve divler üst üste çıktı ama bizim amacımız katmanları yönetmek o yüzden şimdi z-index değerini vereceğiz. (Eğer position komutlarını anlayamadıysanız bu konudan komutları inceleyebilirsiniz)

Şimdi ise son nokta yani z-index elementini kullanma safasına geldik tabi buraya kadar biraz sıkıcı oldu ama makalenin her seviyeye hitap etmesi için temelden anlatmak zorundayım.

z-index;

z-index değeri kullanımı direk sayısal rakamlar ile belirtilir yani z-index:2; gibi bizde hemen üste çıkartmak istediğimiz kutucuklara sayısal büyüklüklere göre z-index değeri verelim.

Css kodları :

Burada görüldüğü üzere kutuIki class’ına z-indez:1; ve kutuBir class’ına da z-index:2; dedik yani kutuBir’i kutuIki’nin üzerine çıkart diye belirttik. z-index elementinin özellikleri bukadardır arkadaşlar aşağıda z-index komutunu kullandığım web sitelerinden resim koydum ki z-index’in bizler için ne kadar önemli olduğunu görün diye.

“Css z-index elementi nedir ? nasıl kullanılır ?” üzerine 42 yorum

  1. Çok güzel olmuş anlatımlarınız. Yeni başlıyorum Css’e ve zor geliyo ama anlatımlarınız çok açık. Özellikle örneklendirerek anlatmanız çok isabetli bir karar olmuş. Çook teşekkürler. Devamını bekliyorum:)

  2. Çok sağolun. Jquery menü ve sliderları alt alta kullandığımda mutlaka sorun yaşıyordum. Artık yaşamıyacağım. 🙂

  3. Hocam ben sayfamın bi tarafında sürekli oraya yapışkan kalmasını istediğim bişe yaptım. 3 katmandan oluşuyo o ve z indexlerine istediğim sırayla 1 2 3 verdim. ama bu sefer sayfanın asıl ortadaki kodları seçilememeye başladı.

    Yani isteğim: div text in üzerine gelirse div görünsün. ama text de seçilebilsin veya text le aynı z index e sahip inputlar tıklanabilsin.

    şimdiden teşekkürler, kolay gelsin..

  4. dostum olayı anladım ama bı turlu yapamadım.bitane dhtml menü var aşağıya doğru açılıyor ve hemen altında flash slideshow var ve menü hep slaytın altına açılıyor.menünün zindexi-1 slaytın zindexi-0 veriyorum yine olmuyor.neyapmam lazım lütfen yardım

  5. dostum flashtaki kodu past ettim nolur yardımcı ol

    *
    *
    AC_RunFlashContent(“id”,”flash1″,”width”,”813″,”height”,”252″,”quality”,”high”,”autoplay”,”true”,”loop”,”true”,”wmode”,”window”,”codebase”,”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab”,”pluginspage”,”http://www.macromedia.com/go/getflashplayer”,”src”,”images/fermaflashson.swf”);
    *
    *
    *
    *
    *
    *
    *
    *
    *
    *
    *
    *
    *
    *
    *
    *
    *<!–
    *
    *
    *

  6. Merhaba bu position değerini verdiğimizde top değerine eksili değerler versek ne gibi sorun olur ya da sorun olur mu çünkü şuanda verdiğimde bir sorun görmüorum bende ki tarayıcılarda

  7. Gördüğüm en güzel ve nazik anlatımlardan biri.. bu benim internetteki ilk yorumum.. Ben zihin engelliler öğretmeniyim.. İki ek yapcam.. kutuları kutubir kutuiki diye isimlendirmeniz.. z-index te de 1 ve 2 rakamlarının bulunuşu ile çakıştığı için bazılarının karnını karıştırabilir.. İkincisi Site örneğiniz sadece z-index ile değil saydamlaştırma ile de aynı efekti verebileceğiniz için z-index anlatımına saf bir z-index örneği verilebilirdi..

  8. adamım yaptım bunu z index i de halletim fakat. gelgelelim localhost ta chrome calıstırdı… Fakat internet explorer calıstırmadı. Sunucuya attım. Orada da calısmadı :/ yapacagım sey hover menu fakat :/ acılmıyor.. acılsa bile nivo slider ilk resmi geciyor sonraki resimde mutlaka tekrar eski haline geliyor. Buna acil bi çozum… Mail adresimden ulaş bana…

  9. Ellerinize sağlık güzel bir ders olmuş bu açığım varmış.. fakat tüm siteyi döktükten sonra lazım olucna bi hayli uğraştırdı 🙂

  10. css’i iyi bildiğim halde, z-index hiç kullanmamıştım. aydınlattığınız için teşekkürler.

  11. Çok teşekkürler.Peki Çerçeve div’ine opacity değeri verildiğinde üste aldığımız divler de etkilenir.Üste aldığımız divlerin etkilenmemesi için ne yapabiliriz.?Yani üste aldığım divde ,opacity değeri olmacayak saydam gözükmeyecek.

  12. merhaba, çok güzel olmuş anlatım, teşekkür ederiz.. ben şey sormak istiyordum, bu kutulari ben menü oluşturmak için kullandım da ve ger birine de kare seklinde bir resim dosyası tanımladı background image ile css içinde, bu image lara link vermek istiyorum böylece o kutiya basıldığında başka bir sayfa açılmış olacak tam olarak menü mantığında, nasıl yapabilirim acaba?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir