CSS Podcast'i - 019: Z-endeksi ve yığın bağlamları
'nı inceleyin.
Diyelim ki tam olarak yerleştirilmiş birkaç öğeniz var. ve birbirlerinin üzerine yerleştirilmeleri gerekir. Şöyle bir HTML metni yazabilirsiniz:
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
Ancak varsayılan olarak hangisi diğerinin üzerine yerleştirilir? Hangi öğenin bunu yapacağını öğrenmek için Z-endeksi ve yığın bağlamlarını anlamanız gerekir.
Z-endeksi
z-index
özelliği, tarayıcının 3D alanına (Z ekseni) dayanarak HTML için katman sırasını açıkça 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ı olabilen sayısal bir değeri kabul eder.
Daha yüksek z-index
değerine sahip öğeler başka bir öğenin üstünde görünür.
Öğelerinizde z-index
ayarlanmamışsa
doküman kaynağı sırası Z eksenini belirler.
Bu, dokümanın daha alt kısımlarındaki öğelerin, kendilerinden önce görünen öğelerin üzerinde bulunduğu anlamına gelir.
Normal akışta
z-index
için belirli bir değer ayarlarsanız ve bu çalışmıyorsa
öğenin position
değerini static
dışında bir değere ayarlamanız gerekir.
Burası, kullanıcıların z-index
konusunda sorun yaşadığı yaygın bir yerdir.
Ancak flexbox veya ızgara bağlamındaysanız bu durum geçerli değildir.
çünkü esnek veya ızgara öğelerinin z-endeksini position: relative
eklemeden değiştirebilirsiniz.
Negatif Z-endeksi
Başka bir öğenin arkasına bir öğe ayarlamak için:
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
, z-index
için auto
değerine sahip olduğu sürece
.child
öğesi arkada kalır.
.my-element
adlı kampanyaya aşağıdaki CSS'yi ekleyin,
ve .child
öğesi arkada kalmaz.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
Çünkü .my-element
artık static
olmayan bir position
değerine sahip
auto
dışında bir z-index
değeri ise
yeni bir yığma bağlamı oluşturdu.
Yani .child
için z-index
değerini -999
olarak ayarlasanız bile
yine de .my-parent
arkasında olmayacaktır.
Bağlamı yığma
Yığma bağlamı, ortak bir üst öğeye sahip olan ve z ekseninde birlikte yukarı ve aşağı hareket eden bir öğe grubudur.
Bu örnekte
ilk üst öğe z-index
değerine sahip 1
,
Böylece yeni bir yığın bağlamı oluşturulur.
Alt öğesinde z-index
/999
var.
Bu üst öğenin yanında, bir alt öğesi olan başka bir üst öğe daha var.
Üst öğede z-index
, 2
, alt öğede de z-index
öğesi 2
olur.
Her iki ebeveyn de yığılmış bir bağlam oluşturduğundan
tüm çocukların z-index
metriği ebeveynlerininkine dayalıdır.
Yığın bağlamındaki öğelerin z-index
değeri
her zaman kendi yığın bağlamında üst öğenin geçerli sırasına göre değişir.
Yığın bağlamı oluşturma
Yeni bir boyut oluşturmak için z-index
ve position
işlemlerini uygulamanız gerekmez
yığma bağlamı.
Yeni bir bileşik katman oluşturan özellikler için değer ekleyerek yeni bir yığın bağlamı oluşturabilirsiniz.
opacity
, will-change
ve transform
gibi.
Şunları yapabilirsiniz:
Tesislerin tam listesini burada görebilirsiniz.
Bileşik bir katmanın ne olduğunu açıklamak için bir web sayfasının bir tuval olduğunu düşünün. Tarayıcı, HTML ve CSS'nizi alır ve bunları kullanarak zeminin ne kadar büyük olacağını belirler. Daha sonra sayfayı bu tuvale boyar. Bir öğe değişecekse konumunu değiştirir; ardından tarayıcının geri gitmesi ve neyin boyanacağını yeniden belirlemesi gerekir.
Performansı artırmaya yardımcı olması için
tarayıcı tuvalin üzerine katmanlı olarak eklenen yeni birleşik katmanlar oluşturur.
Bunlar, yapışkan notlara benzer:
ve değişiklik yapmanın tuvalin geneli üzerinde çok büyük bir etkisi yoktur.
opacity
içeren öğeler için yeni bir birleşik katman oluşturulur,
transform
ve will-change
, değişebileceği için
Böylece tarayıcı, stil ayarlamalarını uygulamak için GPU'yu kullanarak değişikliğin mümkün olduğunca iyi performans gösterdiğinden emin olur.
Kaynaklar
Öğrendiklerinizi sınayın
Z-endeksi bilginizi test edin
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Hangi makale varsayılan olarak üsttedir?
Z-endeksi çalışmıyorsa öğenizde hangi özelliği incelemeniz gerekir?
display
position
animation
relative
Flexbox ve ızgara için position: relative
gerekli mi?