z-index Katmanlandırma
Görsel Demo
Yığın Bağlamı (Stacking Context)
Yığın bağlamı, belirli kriterleri (opacity < 1 veya transform gibi) karşılayan herhangi bir öğe tarafından oluşturulur. Bir kez oluşturulduğunda, alt öğeleri o bağlamın içine hapsolur.
opacity: 0.9
filter: blur()
transform: scale(1)
will-change
baglam_demo.css
.parent {
position: relative;
z-index: 1; /* Bir bağlam oluşturur */
}
.child {
position: absolute;
z-index: 999; /* Hapsoldu! */
}Alt Öğe (999)
Ebeveyn (z:1)Komşu (z:2)
Yaygın Hatalar
Statik Konumlandırma
Z-index, position: static (varsayılan) olan öğelerde yoksayılır. Daima relative, absolute veya fixed kullanın.
Opacity ve Transformlar
Opacity değerini 1’den küçük tutmak veya transform kullanmak, z-index değeri olmasa bile yeni bir yığın bağlamı oluşturur.
‘9999’ Savaşları
Keyfi olarak çok yüksek z-index değerleri kullanmaktan kaçının. Katmanlarınızı yönetilebilir tutmak için tutarlı bir ölçek (10, 20, 30) kullanın.