Z-index
z-index ile öğelerin üst üste dizilimini öğrenirsin.
Üst üste dizilim: z-index
Sayfada öğeler üst üste binebilir — bir bildirim kutusu içeriğin üstünde, bir menü başlığın üstünde durabilir. CSS'in z-index özelliği hangisinin üstte, hangisinin altta kalacağını belirler.
z-index yalnızca konumlandırılmış öğelerde çalışır; yani position değeri static olmayanlarda. Değer ne kadar büyükse öğe o kadar üstte durur. Örneğin z-index: 10 olan bir öğe, z-index: 5 olanın üstünde görünür.
Üst üste dizilim bağlamı
Bir öğe position ile birlikte z-index aldığında yeni bir üst üste dizilim bağlamı (stacking context) oluşturur. Bu bağlamın içindeki çocuklar dışarıdaki öğelerle doğrudan yarışamaz; önce bağlamın kendisi dış bağlamda sıralanır.
Bu yüzden bir modalın içindeki z-index: 9999 değeri, modalın kendisi z-index: 1 ise, dışarıdaki z-index: 5 bir öğenin altında kalabilir. Bağlam sınırı, iç değerden daha baskındır.
Uygulama Bildirimi en üste çıkar
Bir .notice sınıf seçicisi yaz. İçine hem position: fixed hem de z-index: 100 bildirimlerini ekle. Böylece bildirim ekranda sabit duracak ve diğer öğelerin üstünde görünecek.
Örnek çözümü göster
/* bildirimi öne çıkar */
.notice {
position: fixed;
z-index: 100;
}Kendini test et
-
z-index hangi öğede işe yarar?
.a { position: static; z-index: 5; } .b { position: fixed; z-index: 2; }- Yalnızca .a üzerinde (z-index büyük)
- Yalnızca statik öğelerde
- Yalnızca .b üzerinde (position static değil)
- İkisinde de eşit biçimde
Cevabı göster
Yalnızca .b üzerinde (position static değil) — Doğru. z-index yalnızca .b üzerinde işe yarar çünkü position: static değil.
-
Bildirimi öne çıkar
.notice { position: relative; ____; }Cevabı göster
.notice { position: relative; z-index: 10; } -
z-index değerini konuma eşle
- z-index: 100
- En üstte
- z-index: 5
- Ortalarda
- z-index: 0
- Varsayılan düzey
- z-index: -1
- Arka planda