---
title: 'Yığılma Bağlamı'
source: 'https://academia.sh/tr/kurslar/css-temelleri/yigilma-baglami'
course: 'CSS ile Görsel Sunum'
language: tr
updated: '2026-08-17T18:09:16+00:00'
license: 'CC BY-SA 4.0'
---

# Yığılma Bağlamı

Kutuların çizim sırası; z-index değerlerinin yalnızca kardeşler arasında karşılaştırılması ve yığılma bağlamını kuran bildirimler.

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.

```js
// 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.

```css
/* 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.