Yığılma Bağlamı

Konumlandırma kutuları üst üste bindirdi: rozet kartın üzerinde, yapışan başlık satırların üzerinde duruyor. Bir soru açıkta kaldı — iki kutu aynı noktada çakışırsa hangisi üstte çizilir?

Yanıt z-index yazmakla bitmiyor. Bu özelliğin sık karşılaşılan bir davranışı vardır: bazen daha yüksek bir değer daha altta kalır. Sebep bir hata değil, yığılma bağlamı (stacking context) adı verilen bir yapıdır. Bu ders o yapıyı tanımlar.

Varsayılan Çizim Sırası

z-index hiç yazılmadığında bile bir sıra vardır. Aynı yığılma bağlamındaki kutular kabaca şu sırayla çizilir — önce çizilen altta kalır:

1. Bağlamı kuran kutunun arka planı ve kenarlığı.
2. Negatif z-index değerli konumlandırılmış kutular.
3. Akıştaki blok kutuların arka planları.
4. Kaydırılmış kutular.
5. Satır içi içerik ve metin.
6. z-index: auto ya da 0 olan konumlandırılmış kutular.
7. Pozitif z-index değerli konumlandırılmış kutular.

Bu listeden iki gözlem çıkar. Birincisi, konumlandırılmış bir kutu akıştaki kutuların üstünde çizilir; z-index yazmaya gerek yoktur. Bir rozetin kartın üzerinde görünmesi için position: absolute yeter.

İkincisi, aynı düzeydeki kutular arasında belge sırası belirleyicidir: sonra gelen üstte çizilir.

z-index Yalnızca Kardeşler Arasında Karşılaştırılır

z-index bir kutuya küresel bir yükseklik vermez. Değer, yalnızca kutunun kendi yığılma bağlamı içindeki kardeşleriyle karşılaştırılır.

Bir kutu yığılma bağlamı kurduğunda, içindeki bütün kutular o bağlamın içine kapanır. Dışarıdaki kutularla karşılaştırılan şey artık çocukların değerleri değil, bağlamı kuran kutunun değeridir.

// yigilma.mjs — yigilma baglamlarini agac olarak cozer ve cizim sirasini uretir
const agac = {
  ad: "kok", zIndex: "auto", baglamKurar: true, cocuk: [
    { ad: "A", zIndex: 1, baglamKurar: true, cocuk: [
      { ad: "A1", zIndex: 999, baglamKurar: true, cocuk: [] },
      { ad: "A2", zIndex: 5,   baglamKurar: true, cocuk: [] },
    ]},
    { ad: "B", zIndex: 2, baglamKurar: true, cocuk: [
      { ad: "B1", zIndex: 1, baglamKurar: true, cocuk: [] },
    ]},
    { ad: "C", zIndex: "auto", baglamKurar: false, cocuk: [] },
  ],
};

// bir baglam icindeki cocuklar z-index'e gore, esitse belge sirasina gore siralanir
function ciz(dugum, derinlik = 0, onEk = "") {
  const yol = onEk ? `${onEk} > ${dugum.ad}` : dugum.ad;
  const z = dugum.zIndex === "auto" ? 0 : dugum.zIndex;
  console.log(`${"  ".repeat(derinlik)}${dugum.ad.padEnd(4)} z=${String(dugum.zIndex).padEnd(4)} yol=${yol}`);
  const sirali = [...dugum.cocuk]
    .map((c, i) => ({ c, i }))
    .sort((x, y) => {
      const zx = x.c.zIndex === "auto" ? 0 : x.c.zIndex;
      const zy = y.c.zIndex === "auto" ? 0 : y.c.zIndex;
      return zx - zy || x.i - y.i;
    });
  for (const { c } of sirali) ciz(c, derinlik + 1, yol);
  return z;
}

console.log("cizim sirasi (ustteki alttan uste dogru, ic ice):");
ciz(agac);

console.log("\n--- A1 ile B karsilastirmasi ---");
console.log("A1.z = 999, B.z = 2");
console.log("A1 kok baglaminda degil; A (z=1) baglaminin icinde.");
console.log("Kok baglaminda karsilastirilan degerler: A=1, B=2  -> B ustte.");
console.log("Sonuc: A1 (999) tum B agacinin ALTINDA kalir.");

cizim sirasi (ustteki alttan uste dogru, ic ice):
kok  z=auto yol=kok
  C    z=auto yol=kok > C
  A    z=1    yol=kok > A
    A2   z=5    yol=kok > A > A2
    A1   z=999  yol=kok > A > A1
  B    z=2    yol=kok > B
    B1   z=1    yol=kok > B > B1

--- A1 ile B karsilastirmasi ---
A1.z = 999, B.z = 2
A1 kok baglaminda degil; A (z=1) baglaminin icinde.
Kok baglaminda karsilastirilan degerler: A=1, B=2  -> B ustte.
Sonuc: A1 (999) tum B agacinin ALTINDA kalir.

Son blok, bu dersin çözdüğü sorunun tam ifadesidir. A1 kutusunun z-index değeri 999 — sayfadaki en yüksek değer. Buna karşın 2 değerli B kutusunun altında kalıyor.

Sebep, A1 kutusunun kök bağlamda bulunmamasıdır. Kök bağlamda karşılaştırılan iki değer vardır: A için 1 ve B için 2. B kazanır ve bütün alt ağacıyla birlikte A’nın üstünde çizilir. A1 kutusunun 999 değeri yalnızca kardeşi A2 ile karşılaştırılır.

Uygulanabilir sonuç şudur: bir kutu beklendiği kadar yukarı çıkmıyorsa çözüm değeri büyütmek değildir. Değeri milyona çıkarmak da işe yaramaz. Çözüm, atalar zincirinde hangi kutunun bağlam kurduğunu bulmak ve karşılaştırmayı o düzeyde yapmaktır.

Yığılma Bağlamını Ne Kurar

Bir kutu şu koşullardan biri sağlandığında yığılma bağlamı kurar:

• Belgenin kök ögesi (her zaman bir bağlam kurar).
• position değeri static dışında ve z-index değeri auto dışında olan kutular.
• position: fixed ya da position: sticky olan kutular (z-index yazılmasa bile).
• opacity değeri 1’den küçük olan kutular.
• transform, filter, perspective, clip-path, mask gibi özelliklerin none dışında bir değer aldığı kutular.
• isolation: isolate bildirilen kutular.
• Esnek kutu ya da ızgara düzeninin z-index değeri auto dışında olan çocukları.

Bu listenin ortası dikkat çekicidir. opacity: 0.99 yazmak — görsel olarak fark edilmeyecek bir değişiklik — bir yığılma bağlamı kurar ve o kutunun içindeki bütün z-index hesabını dışarıdan yalıtır. Aynı şey bir kutuya hareket vermek için yazılan transform bildirimi için de geçerlidir.

Yığılmayla ilgisi olmayan bir bildirimin yığılmayı değiştirmesi şaşırtıcı görünür, ama gerekçesi vardır: bu özelliklerin hepsi kutuyu ve içeriğini bir bütün olarak işlemeyi gerektirir. Saydamlık, kutunun içindekilerin ayrı ayrı değil, birlikte harmanlanmasıyla hesaplanır; bu da onları tek bir katman olarak ele almayı zorunlu kılar.

isolation: isolate

Listedeki son maddeden önceki isolation: isolate bildirimi, yığılma bağlamı kurmanın yan etkisiz yoludur. Bir kutunun içindeki z-index değerlerinin dışarıya sızmasını istemiyorsa yazılır ve başka hiçbir şeyi değiştirmez.

Bu, birden çok bileşenin bir arada bulunduğu sayfalarda kullanışlıdır: her bileşen kendi bağlamını kurarsa, iç z-index değerleri küçük ve yerel tutulabilir. Bir bileşenin 10 değeri başka bir bileşenin 10 değeriyle yarışmaz.

z-index Ölçeği

Bu dersin pratik sonucu bir yazım disiplinidir.

• z-index değerleri küçük ve adlandırılmış tutulur. Sayfada birkaç katman vardır — taban, yapışan başlık, açılır katman, üst katman — ve her birine 1, 10, 100 gibi seyrek değerler verilir. Aradaki boşluk sonradan katman eklemeye yer bırakır.
• Bir kutunun üstte kalması için önce position yeter mi diye bakılır; konumlandırılmış kutu akıştaki kutuların zaten üstündedir.
• Bileşenler isolation: isolate ile yalıtılır; böylece iç değerler dışarıya sızmaz.

/* istasyon.css — 14. adım: katman ölçeği */
.kart { position: relative; isolation: isolate; }

.kart .durum-rozeti {
  position: absolute;
  z-index: 1;
  inset-block-start: 8px;
  inset-inline-end: 8px;
}

.olcum-cizelgesi thead th {
  position: sticky;
  z-index: 10;
  inset-block-start: 0;
  background-color: #f5f7f8;
}

.atlama-baglantisi:focus {
  position: fixed;
  z-index: 100;
  inset-block-start: 8px;
  inset-inline-start: 8px;
}

Karta yazılan isolation: isolate, rozetin z-index: 1 değerinin kartın dışındaki hiçbir şeyle yarışmamasını sağlar. Yapışan başlık 10, odaklanan atlama bağlantısı 100 katmanında durur; üçü arasındaki sıra sayfanın tamamı için tanımlıdır ve okunabilir.

Özet

• Çizim sırası z-index yazılmasa da tanımlıdır; konumlandırılmış kutular akıştaki kutuların üstünde, aynı düzeydekiler ise belge sırasına göre çizilir.
• z-index küresel bir yükseklik vermez; yalnızca kutunun kendi yığılma bağlamı içindeki kardeşleriyle karşılaştırılır.
• Bir kutu bağlam kurduğunda içindeki bütün değerler o bağlama kapanır; dışarıyla karşılaştırılan şey bağlamı kuran kutunun değeridir.
• opacity, transform, filter gibi yığılmayla ilgisiz görünen bildirimler de bağlam kurar, çünkü kutunun içeriğini bir bütün olarak işlemeyi gerektirirler.
• isolation: isolate bağlam kurmanın yan etkisiz yoludur; bileşenlerin iç katman değerlerini yerel tutmak için kullanılır.

Sonraki Adım

Bu konu boyunca kutular ölçüldü, dizildi, üst üste bindirildi. Bir durum hâlâ ele alınmadı: içerik kutusuna sığmadığında ne olur? Uzun bir istasyon adı dar bir hücreye, geniş bir ölçüm çizelgesi dar bir ekrana sığmaz. Sonraki ders taşmanın ne olduğunu ve kırpma, kaydırma, gizleme seçeneklerinin her birinin neyi kaybettirdiğini ele alır.