Z-endeksi ve yığma bağlamlar

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

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

Öğrendiklerinizi sınayın

Z-endeksi bilginizi test etme

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