Z Index
Z Index (Z İndeksi) CSS’te, web sayfalarında öğelerin üst üste gelme sırasını kontrol eden kritik bir özelliktir. Bu özellik, hangi öğenin diğerlerinin önünde veya arkasında görüneceğini belirler ve görsel hiyerarşi oluşturur. Z Index, kişisel web siteleri, bloglar, e-ticaret siteleri ve haber siteleri gibi karmaşık projelerde çok önemlidir. Çünkü bir sayfada pop-up’lar, tooltip’ler veya banner’lar gibi birden fazla öğe aynı alanı paylaşabilir ve kullanıcı deneyimi bu öğelerin doğru sırayla görünmesine bağlıdır.
Z Index’i, bir evi inşa ederken odaların planını yapmak gibi düşünebiliriz: Önemli mobilyalar en ön planda, daha az kritik öğeler ise geride yer alır. Örneğin bir e-ticaret sitesinde promosyon pencereleri ürünlerin önünde görünmelidir. Bloglarda widget’lar ve içerik kutuları metni gizlemeden öne çıkmalıdır. Haber sitelerinde uyarı barları ve bildirimler her zaman içerik üzerinde görünür olmalıdır. Z Index kullanımı, aynı zamanda yazı yazarken satır ve paragrafların mantıklı sırayla ilerlemesine benzer bir düzen sağlar.
Bu eğitimde, Z Index’in doğru uygulanmasını, üst üste binen öğelerdeki çatışmaların nasıl çözüleceğini ve mantıklı bir görsel hiyerarşinin nasıl oluşturulacağını öğreneceksiniz. Gerçek dünya örnekleri ile çalışmak, öğelerin render sırasının kullanıcı deneyimini nasıl etkilediğini anlamanıza yardımcı olacak.
Temel Örnek
css/* Temel Z Index örneği: iki kutu üst üste */
.container {
position: relative; /* stacking context oluşturur */
}
.box1 {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1; /* mavi kutunun arkasında */
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2; /* kırmızı kutunun önünde */
}Bu örnekte, .container öğesi position: relative ile stacking context (yığılma bağlamı) oluşturur. Z Index, yalnızca position: relative, absolute, fixed veya sticky ile tanımlanmış öğelerde çalışır.
.box1 ve .box2 öğeleri position: absolute kullanır, bu sayede sayfada tam konumlandırılabilir. Box1’in z-index değeri 1, Box2’nin 2’dir; böylece Box2 Box1’in üzerinde görünür. Renklerin farklı seçilmesi, etkinin kolayca gözlemlenmesini sağlar.
Yeni başlayanlar, Z Index’in position olmadan çalışacağını veya eşit değerlerin sıralamayı değiştirmeyeceğini düşünebilir. Aslında, eşit değerler olduğunda, DOM’da sonra gelen öğe önce gelenin üzerine çıkar. Bu davranış, modallar, tooltip’ler ve floating öğeler için kritik öneme sahiptir.
Pratik Örnek
css/* Pratik Z Index örneği: e-ticaret modal */
.shop-container {
position: relative;
}
.product-card {
position: relative;
z-index: 1; /* temel içerik katmanı */
background-color: #f5f5f5;
padding: 20px;
margin: 10px 0;
}
.modal {
position: absolute;
top: 10px;
right: 10px;
width: 250px;
height: 120px;
background-color: yellow;
z-index: 10; /* tüm kartların üstünde */
border: 1px solid #ccc;
padding: 15px;
}Bu örnekte .shop-container stacking context sağlar. Ürün kartları z-index:1 ile temel içerik katmanını oluşturur. Modal penceresi z-index:10 ile tüm içeriklerin önünde görünür.
Bu yöntem bloglar (widget’lar), haber siteleri (alertler) ve kişisel siteler (float menüler) için de uygulanabilir. Yığılma bağlamını anlamak, öğelerin üst üste gelmesini doğru yönetmenizi ve kullanıcı deneyimini tutarlı kılmanızı sağlar.
En iyi uygulamalar ve yaygın hatalar:
En iyi uygulamalar:
- Mobile-first tasarım: floating öğelerin küçük ekranlarda düzgün görünmesini sağlamak.
- Performans optimizasyonu: çok yüksek z-index değerlerinden kaçınmak ve hiyerarşiyi net tutmak.
- Sürdürülebilir kod: z-index değerlerini dokümante ederek ekip çalışmasını kolaylaştırmak.
-
Yığılma bağlamını bilmek: hangi öğelerin stacking context oluşturduğunu belirlemek.
Yaygın hatalar: -
Position tanımlamamak, z-index’in çalışmamasına sebep olur.
- Çok yüksek değerler kullanmak, katman yönetimini zorlaştırır.
- Responsive tasarımı göz ardı etmek, istenmeyen üst üste binmeler yaratır.
- Çok fazla CSS override yapmak ve stacking context’i dikkate almamak.
Debug ipucu: Tarayıcı geliştirici araçları ile stacking context’i inceleyin ve z-index değerlerini dinamik olarak test edin.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| z-index | Öğe yığılma sırasını kontrol eder | z-index: 5; |
| position | Z-index etkisi için gereklidir | position: absolute; |
| stacking context | Yerel yığılma bağlamı oluşturur | position: relative; z-index: 2; |
| auto | DOM sırasına göre varsayılan değer | z-index: auto; |
| inherit | Üst öğeden değer miras alır | z-index: inherit; |
Özet ve sonraki adımlar:
Z Index, görsel hiyerarşiyi ve üst üste binen öğelerin etkileşimini yönetmek için kritik öneme sahiptir. Position, stacking context ve DOM sırası doğru şekilde anlaşılmalıdır. Z-index, HTML yapısı ve JavaScript ile modallar, tooltip’ler gibi etkileşimleri doğrudan etkiler.
Z Index’i öğrendikten sonra CSS Grid ve Flexbox ile katmanlı ve gelişmiş layout yönetimi yapılabilir. Kişisel web siteleri, bloglar ve e-ticaret projeleri üzerinde pratik yaparak, kullanıcı dostu ve düzenli arayüzler oluşturabilirsiniz.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek