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;
Abdullah Tekin
PHP, Ajax ve JQuery'e son derece hakim bir programcı olarak bazı firma ve kuruluşlara aşağıdaki konular dahilinde freelance olarak hizmet veriyor: - Daima web standartlarını, SEO (Arama Motoru Optimizasyonu) ve güvenlik önlemlerini içeren projeler gerçekleştirmek, - Tasarımı yapılmış web sitelerini kusursuz bir şekilde web'e uyarlamak, - Özgün ve kodları kendisi tarafından yazılabilen PHP+Jquery+Ajax destekli modüller hazırlamak - Web stratejileri oluşturulması, - Web dahilinde sistemler kurmak, - Kontrol panelleri hazırlamak, - Hızlı, kullanılabilir, erişilir ve güvenliği üst düzeyde olabilecek web siteleri alt yapısını oluşturmak. İçerik Yönetim Sistemi (CMS), Haber Sistemi, E-Ticaret ve Okul Yönetim projelerini içine alan PHP konusundaki birikimlerini burada Sanalkurs.net üyelerine aktarıyor ve aynı zamanda Sanalkurs'un yazılım altyapısını şu an en üst düzeye taşımak için gece gündüz kodlarla boğuşuyor.
Yorum Yaz

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

eline emeğine sağlık
[b]z-index: -1;[/b] şeklinde yaptığınızda da o katman en alta geçecektir.
javascript koduyla yapmak isterseniz de this.style.zIndex=1; yapmanız gerekir.
tam olarak ne işe yarıyor? anlmadım. katmanları alt üste getirmek içinmi bu kod?
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.
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..
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
mesajlarım neden görüntülenmiyor :hayret:
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:
Evet z-index' te bende bazen şaşırıp yanına px koyuyorum, dalgınlıkla olabiliyor :)
teşekkürler

Yukarı Git