Yükleniyor...

CSS Z-index

Position dersi kutuları yerleştirdi. z-index sonraki soruyu yanıtlar: iki kutu örtüşünce hangisi okuyucuya daha yakındır? Masadaki kâğıt yapraklarını düşünün — üsttekiler alttakileri örter. Dev sayılar uydurmadan önce günlük kuralları öğrenin.

Bir z-index araç seti

📊 Z-index bir bakışta

Fikir Günlük iş
z-index Aynı stacking context içindeki örtüşen kardeşler arasında boyama sırasını ayarlar
Önce konumlandırılmış Genelde static dışı position gerekir (veya bazı modern layout çocukları)
Yüksek olan kazanır Daha büyük tamsayılar sonra boyanır — üstte görünürler
auto Varsayılan — belge sırası ve üst bağlam kurallarını izle
Stacking context Bir «kafes» — çocuklar birbirleriyle kıyaslanır, tüm sayfayla değil
Sakin ölçek Küçük adımlar (1, 2, 10) ve adlandırılmış roller; 9999 yarışları değil

z-index kutuyu sola veya sağa kaydırmaz. Kutular aynı ekran alanını paylaşırken yalnızca kimin kimi örttüğünü değiştirir.

Rozeti kartının üstüne kaldırın

Karta konumlandırılmış bir yuva verin, sonra rozeti mütevazı bir z-index ile yükseltin. Kardeş sırası tek başına yetebilir; açık bir katman niyeti okunaklı kılar.

Kartın üstünde rozet

css 
.card {
position: relative;
}

.card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.2rem 0.45rem;
background: #0b5fff;
color: #fff;
}

Sayfanın üstünde örtü

Modallar ve çekmeceler genelde sıradan içeriğin üstünde oturur. Konumlandırılmış bir örtüyü net bir katman numarasıyla eşleştirin — ve sayfa içeriğini bilerek daha aşağıda tutun.

Sayfanın üstünde modal

css 
.page {
position: relative;
z-index: 1;
}

.modal {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}

Kardeşleri karşılaştırın, tüm dünyayı değil

Bir bağlamdaki kardeşler arasında yüksek z-index kazanır. Değerler eşitse DOM’da sonraki kardeşler genelde üstte boyanır. Sayfa çapında savaşlara koşmadan önce bir üst öğe içinde karşılaştırmaya başlayın.

Yığılmış kardeş kartlar

css 
.stack {
position: relative;
}

.stack .card-a {
position: absolute;
z-index: 1;
}

.stack .card-b {
position: absolute;
z-index: 2;
}

Stacking context çocukları kafesler

Kendi stacking context’i olan bir üst öğe (örneğin konumlandırılmış + z-index) çocukları tuzağa düşürebilir. z-index: 999 olan bir çocuk, üst öğenin kendisi daha aşağıdaysa o üstün dışındaki bir kardeşin üstüne sıçrayamaz. Üst katmanı düzeltin — yalnızca çocuğu şişirmeyin.

Bağlam kafesi

css 
.panel {
position: relative;
z-index: 1;
}

.panel .popup {
position: absolute;
z-index: 999;
}

.toast {
position: fixed;
z-index: 5;
}

Sakin bir z-index alışkanlığı

Rollere ad verin (--layer-badge, --layer-modal) veya küçük bir ölçek kullanın. Hata ayıklama dışında 99999’dan kaçının. Unutmayın: yerleştirme position; katmanlama z-index; float temizliği sonraki derslerde.

Adlandırılmış katman rolleri

css 
:root {
--layer-base: 1;
--layer-badge: 2;
--layer-modal: 10;
}

.badge {
position: absolute;
z-index: var(--layer-badge);
}

.modal {
position: fixed;
z-index: var(--layer-modal);
}

Kendiniz deneyin

  1. Relative bir karta absolute rozet koyun ve z-index: 2 ayarlayın.
  2. Sayfa içeriği 1 iken fixed arka plan/modal’ı z-index: 10 yapın.
  3. Örtüşen iki absolute kardeşe farklı z-index verin ve yerlerini değiştirin.
  4. Yüksek z-index’li çocuğu düşük z-index’li üstün içine yerleştirin — kafesi izleyin.
  5. Bir «9999»u adlandırılmış custom property ölçeğine yeniden yazın.

Yaygın hatalar

  • Düz bir static kutuda z-index’in her şeyi yeniden sıralamasını beklemek
  • Stacking context’lerle yalnızca iç içe çocuğu yükselterek savaşmak
  • Okunabilir ölçek yerine 99999 yarışına girmek
  • Bu dersi Position (yerleştirme) veya Display (kutu türü) gibi ele almak
  • Layout araçları yerine sayfa sütunları uydurmak için z-index kullanmak

Özet

  • z-index kutular örtüşünce kimin üstte boyanacağını kontrol eder
  • Genelde static olmayan position gerekir (veya özel layout durumları)
  • Aynı stacking context içinde yüksek değerler kazanır
  • Üst bağlamlar çocukları kafesleyebilir — doğru seviyeyi düzeltin
  • Küçük adlandırılmış ölçekleri tercih edin; float’ı sonraki derslere bırakın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 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
Konu 38 / 48
Css Ders