Z-endeksi ve yığma bağlamlar

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

• Katmanları zorunlu kılma
• Animasyon Kılavuzu: Katman oluşturmayı zorla
• Z endeksini anlama

Öğrendiklerinizi sınayın

Z-endeksi bilginizi test edin

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>