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ı :
.cerceve{width: 400px; height: 200px; background: #e2e2e2; margin:100px auto;}
.kutuBir{width: 180px; height: 180px; background: #b98f91; float: left; }
.kutuIki{width: 150px; height: 150px; background: #889f7b; float: right;}
Html kodları:
<div class="cerceve">
<div class="kutuBir"></div>
<div class="kutuIki"></div>
</div>
Ş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ı :
.cerceve{width: 400px; height: 200px; background: #e2e2e2; margin:100px auto; position: relative;}
.kutuBir{width: 180px; height: 180px; background: #b98f91; position: absolute; left: 10px; top: 10px;}
.kutuIki{width: 150px; height: 150px; background: #889f7b; position: absolute; left: 60px; top: 25px;}
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 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ı :
.cerceve{width: 400px; height: 200px; background: #e2e2e2; margin:100px auto; position: relative;}
.kutuBir{width: 180px; height: 180px; background: #b98f91; position: absolute; left: 10px; top: 10px; z-index: 2;}
.kutuIki{width: 150px; height: 150px; background: #889f7b; position: absolute; left: 60px; top: 25px; z-index: 1;}
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.
Bu makale Aycan BÜLBÜL tarafından aycan.net için yazılmıştır.
Kaynak göstermenden yayımlamak yasaktır.
Cok kullanisli bir olay, tesekkürler Aycan’m 
Aycan, Kanka biliyordum ama sayende tekrar etmiş oldum….
Eline Sağlık….
Çok boyutlu bir makale olmuş teşekkürler
peki z-index ile birlikte opacity de kullanarak daha fazla gorsellik katmamiz mumkun mu ?
Tabiki z-index’in çakıştığı css elementleri hiç görmedim o yüzden her türlü efekt verebiliriz.
Ç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:)
Çok sağolun. Jquery menü ve sliderları alt alta kullandığımda mutlaka sorun yaşıyordum. Artık yaşamıyacağım.
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..
S.a admin MSNimi ekleyebilir misin? css de ufak bi yerde yardıma ihtiyacım var MSN’den görüşmemiz gerekiyo da..
eklersen sevinirim.
teşekkürler anlatım için
TEŞEKKÜRLER GERÇEKTEN İŞİME YARIUACAK :
Teşekkürler güzel bilgi
harika bir bilgi çok güzel anlatım.işime çok yaradı.
çok işime yaradı teşekkürler
gerçekten sıkıntı yaşadığım durumlardan birisiydi sık kullanılanlara attım akşam inşaAllah incelerim.
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
Flash’a bu kodu ekleyin
hanği kodu ekleyeyim
flashin divi
menünün divi
hocam senin yazdığın koduda göremiyorum benim yazdıgım div kodlarıda göremiyorum.
< *p*a*r *a*m name="wmode" value="transparent" />Aralara yıldız koyuyorum, yıldızları sil ve flash kodunun içine koy.
flash kodun içinde window diye atanmış wmode onu transparet yaptım ama yine olmadı
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”);
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*<!–
*
*
*
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
bir üst div’de overflow:hidden; yoksa sorun sorun çıkartmaz.
