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ı :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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ı:
|
1 2 3 4 |
<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ı :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.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;
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ı :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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.
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..
webmaster006@fuzzyturk.com
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.
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..
eyvallah ya site temamı yaparken kullandım Allah razı olsun
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…
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ı 🙂
css’i iyi bildiğim halde, z-index hiç kullanmamıştım. aydınlattığınız için teşekkürler.
Anlatım güzel
z index değeri büyüdükçe üste mi altamı geçer sayfa bunun cevabını arıyorum kafa basmıo sanırım bende
aynı seviyedeki objelerde z-index değeri büyüdükçe üste çıkar.
bi z-index ‘in javascript ‘ te kullanımını biliyorsan anlatırmsn ?
$(‘span’).css(‘zIndex’,10); ?
teşekkürler çok yararlı oldu
Ç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.
bi sorum olacak z-index e negatif değer de verebilir miyiz ?
Verebilirsiniz
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?
.kutu1Bir class’larını div’e değil A tagına verirseniz probleminiz çözülecek.
benim işime çok yaradı çok teşekkür ediyorum 🙂