CSS Podcast - 019: Z-endeksi ve yığın bağlamlar
Mutlaka konumlandırılmış ve birbirinin üzerine yerleştirilmesi gereken birkaç öğeniz olduğunu varsayalım. Aşağıdaki gibi bir HTML kodu yazabilirsiniz:
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
Peki varsayılan olarak hangisi diğerinin üzerindedir? Hangi öğenin bunu yapacağını bilmek için Z-endeksi ve yığın bağlamları anlamanız gerekir.
Z-endeksi
z-index
özelliği, tarayıcının 3D alanına (Z ekseni) göre HTML için açık bir şekilde katman sırası ayarlar.
Bu, hangi katmanların size daha yakın ve size daha uzak olduğunu gösteren eksendir.
Web'deki dikey eksen Y ekseni, yatay eksen ise X eksenidir.
z-index
özelliği, pozitif veya negatif sayı olabilecek sayısal bir değeri kabul eder.
z-index
değeri daha yüksek olan öğeler başka bir öğenin üzerinde görünür.
Öğelerinizde z-index
ayarlanmamışsa varsayılan davranış, doküman kaynağı sırası Z eksenini belirler.
Yani, dokümanda daha aşağıda bulunan öğeler, kendilerinden önce görünen öğelerin üzerinde yer alır.
Normal akışta, z-index
için belirli bir değer ayarlarsanız ve bu değer çalışmazsa öğenin position
değerini static
dışında bir değere ayarlamanız gerekir.
Burası, kullanıcıların z-index
ile ilgili sorun yaşadığı yaygın bir yerdir.
Ancak flexbox veya ızgara bağlamındaysanız bu durum geçerli değildir. Çünkü esnek kutu veya ızgara öğelerinin z-endeksini, position: relative
eklemeden değiştirebilirsiniz.
Negatif Z-endeksi
Bir öğeyi başka bir öğenin arkasına ayarlamak isterseniz z-index
için negatif bir değer ekleyin.
.my-element {
background: rgb(232 240 254 / 0.4);
}
.my-element .child {
position: relative;
z-index: -1;
}
.my-element
, auto
değerinin z-index
için başlangıç değerine sahip olduğu sürece .child
öğesi onun arkasında yer alır.
Aşağıdaki CSS'yi .my-element
öğesine ekleyin. .child
öğesi bunun arkasında durmaz.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
.my-element
artık static
olmayan bir position
değerine ve auto
olmayan bir z-index
değerine sahip olduğu için yeni bir yığma bağlamı oluşturmuştur.
Bu, .child
değerini z-index
olarak -999
olarak ayarlasanız bile .my-parent
değerinin gerisinde kalmayacağı anlamına gelir.
Bağlam yığını
Yığma bağlamı, ortak bir üst öğesi olan ve z ekseninde birlikte yukarı ve aşağı hareket eden bir öğe grubudur.
Bu örnekte, ilk üst öğenin z-index
değeri 1
olduğundan yeni bir yığın bağlamı oluşturulur.
Alt öğesinin z-index
değeri 999
şeklindedir.
Bu üst öğenin yanında, bir alt öğesi olan başka bir üst öğe var.
Üst öğenin z-index
değeri 2
, alt öğenin z-index
değeri de 2
olur.
Her iki ebeveyn de yığın bağlamı oluşturduğundan
tüm çocukların z-index
ebeveynininkine dayanır.
Yığma bağlamı içindeki öğelerin z-index
'i, her zaman kendi yığın bağlamındaki üst öğenin mevcut sırasına göre belirlenir.
Yığın bağlamı oluşturma
Yeni bir yığma bağlamı oluşturmak için z-index
ve position
öğelerini uygulamanız gerekmez.
opacity
, will-change
ve transform
gibi yeni bir bileşik katman oluşturan özellikler için bir değer ekleyerek yeni bir yığın bağlamı oluşturabilirsiniz.
Tesislerin tam listesini burada görebilirsiniz.
Kompozit katmanın ne olduğunu açıklamak için bir web sayfasını tuval olarak düşünün. Tarayıcı, HTML ve CSS'nizi alıp bunları kullanarak zemini ne kadar büyüteceğinizi belirler. Ardından sayfayı bu tuvale boyar. Bir öğenin değişmesi gerekiyorsa (mesela konumu değişirse), tarayıcının geri dönüp neyin boyayacağına karar vermesi gerekir.
Tarayıcı, performansı iyileştirmeye yardımcı olmak için zeminin üzerine katman olarak yeni kompozit katmanlar oluşturur.
Bunlar post-it notlarına benzer:
Birini taşımak ve değiştirmek tüm tuval üzerinde çok büyük bir etki yaratmaz.
opacity
, transform
ve will-change
içeren öğeler büyük olasılıkla değişeceği için yeni bir birleşik katman oluşturulur. Böylece tarayıcı, stil ayarlamalarını uygulamak için GPU'yu kullanarak değişikliğin mümkün olduğunca yüksek performanslı olmasını sağlar.
Kaynaklar
Öğrendiklerinizi sınayın
Z-endeksi bilginizi test etme
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Hangi makale varsayılan olarak en üstte yer alır?
Z-endeksi çalışmıyorsa öğenizde hangi özelliği incelemelisiniz?
display
relative
position
static
dışında bir değere ayarlandığından emin olun.animation
Flexbox ve ızgara için position: relative
gerekli mi?
position: relative
olmadan çalışır.