Z-INDEX ile Katmanlar

Bilindiği üzere Photoshop' ta Layer dediğimiz Türkçe deyimiyle "Katmanlar" vardır. Bir katmanı diğer katmanın üzerine aldığınızda en üstte o katman aktif olur. Peki CSS 'te bunu nasıl yapabilirim diyenler için ise; z-index

Bilindiği üzere Photoshop' ta Layer dediğimiz Türkçe deyimiyle "Katmanlar" vardır. Bir katmanı diğer katmanın üzerine aldığınızda en üstte o katman aktif olur. Peki CSS 'te bunu nasıl yapabilirim diyenler için ise; z-index

CSS' te ki z-index' in tek farklı yanı rakamsal değerler almasıdır. Standart değer olarak 0 (Sıfır)' dır. Şimdi örnek uygulamamıza geçebiliriz.

İki adet div komutunu kullanarak ve bunlara id tanımlayarak kutu oluşturdum. Üstte görünmesini istediğim kutununn z-index değerini 1 yaptım. Bu da şu demektir; eğer bir kutu daha oluşturacak ve bununda en üstte görünmesini istiyorsanız z-index değerini 2 yapacaksınız demektir.


<style type="text/css">

<!--

#katman1 {

    background-color: #66CCFF;

    height: 300px;

    width: 300px;

    position: relative;

    z-index: 1;

}

#katman2 {

    height: 200px;

    width: 200px;

    position: absolute;

    background-color: #FFCCFF;

    left: 203px;

    top: 69px;

}

-->

</style>




<div id="katman1">KATMAN 1</div>

<div id="katman2">KATMAN 2</div>


  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 12 yıl önce
eline emeğine sağlık
• 12 yıl önce
[b]z-index: -1;[/b] şeklinde yaptığınızda da o katman en alta geçecektir.
• 12 yıl önce
javascript koduyla yapmak isterseniz de this.style.zIndex=1; yapmanız gerekir.
• 12 yıl önce
tam olarak ne işe yarıyor? anlmadım. katmanları alt üste getirmek içinmi bu kod?
• 12 yıl önce
Logonun linki İE'de çalışırken Firefox'da link aktif değildi, deli olmak üzereydim, tesadüf araştırırken sizin bu sayfada anlattığınız kodun işlevini okudum ve sorun çözüldü. Teşekkürler.
• 12 yıl önce
Arkadaşlr çözümü basittr muhtemeln ama takılnca takılıyo insan www.bilkon-kontrol.com.tr/serap üstteki menüde ürünlere gelindiğnde altında açılan menüde sorunum var.Sayfadakilern (veri toplama vs.)nin altına geliyor hemde linklerin üstüne gelinmiyor veri toplama endüstriyel kontrol vs yani sayfa içeriğindekileri bi layerın içinde topladım. bu layerın top'ını artırdığımda layer aşağı kayıyo dolayısıyla içindeki layerlarda kayıyo böylece ürünlern üstüne geldiğmde oluşan sorun ortadn kalkmş oluyr..
• 12 yıl önce
Lakin bu seferde menü ve sayfa içeriğindekiler arasında biraz fazla boşluk oluşuyor.:hayret:ürünler altında 3 linkim var ya fazla olsaydı napıcaktım sayfa içeriğini iyicemi aşağı indirecektim bi türlü çözemedim. :sasir: z-indexle alakalı olduğunu düşünüyorum onuda denedim ama olmadı.yardımcı olursanız çok sevinirim .teşekkürler
• 12 yıl önce
mesajlarım neden görüntülenmiyor :hayret:
• 12 yıl önce
yukarıdaki sorunuma forumda yanıt verildi. burda da yazayım çok basit bir sorunmuş :D z-index değeri sayı olacak sadece yanına px diye değer verilmezmiş ve ben dalgınlık ve dikkatsizlikle px yazmışım :) teşekürler ders içinde ayrıca :-dusun:
• 11 yıl önce
Evet z-index' te bende bazen şaşırıp yanına px koyuyorum, dalgınlıkla olabiliyor :)
• 9 yıl önce
teşekkürler

Yukarı Git