position: sticky aslında nasıl çalışır ve neden bazen başarısız olur?

Question

Accepted Answer

`position: sticky` bir hibrit davranıştır: bir element `relative` gibi davranır (normal akışta kalır) **kaydırma** sırasında belirlediğiniz bir eşiğe ulaşana kadar, ardından `fixed` gibi davranır (yerinde sabit kalır) — ancak yalnızca **containing block**'u hâlâ ekranda olduğu sürece.

```css
.section-header {
  position: sticky;
  top: 0;        /* sticks when its top edge reaches the viewport top */
}
```

`top` (veya `bottom`/`left`/`right`) değeri **zorunludur** — eşiği tanımlar. Onsuz, sticky hiçbir şey yapmaz.

## Kapsam: yalnızca parent içinde yapışır

Bir sticky element, **parent container**'ı içinde sınırlandırılır. O parent'ı *kaydırırken* yapışır, sonra parent'ın alt kısmı ekrandan çıktığında kaydırılıp gider. Bu, "sticky section header"'ların çalışmasını sağlayan şeydir — her header yalnızca kendi section'ı görünümdeyken yapışır.

## Neden sık sık "çalışmaz" — başarısızlık durumları

**1. Bir ancestor'ın `overflow: hidden/auto/scroll` değeri var.** Bu #1 nedenidir. Sticky positioning, herhangi bir kaydırılabilir ancestor tarafından bozulur, çünkü element sayfaya değil *o* scroll container'a göre yapışır:

```css
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
```

**2. Parent yeterince uzun değildir.** Sticky yalnızca parent, sticky element'ten daha uzunsa yapışmak için yeterli alana sahip olur — parent aynı yükseklikteyse, kaydırılacak hiçbir şey yoktur, bu nedenle hiçbir zaman yapışmış gibi görünmez.

**3. Eşik ayarlanmamış.** `top`/`bottom` unutmak yapışma noktası olmadığı anlamına gelir.

**4. Parent'ta yükseklik kısıtlamaları** (örn. öğeleri uzatan bir flex parent) kaydırma alanını kaldırabilir.

## Hata ayıklama kontrol listesi

```text
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
```

## Neden önemli

`position: sticky`, sticky header'ları, tablo header'larını, sidebar'ları ve hiçbir JavaScript olmadan "scrollspy" UI'larını destekler.

Ancak özellikleri — özellikle de herhangi bir ancestor'da `overflow` olması onu sessizce bozması — sık sık "bu neden yapışmıyor?" hata ayıklamasının kaynağıdır.

Containing-block scope'unu ve overflow tuzağını bilmek, onu güvenilir bir şekilde kullanmanızı sağlar.