Kepiye position: sticky bener-bener ngadeg, lan kenapa kadhang ora berhasil?

Question

IT Interview Practice · Accepted Answer

`position: sticky` punika hybrid: unsur ugi kekarepan kaya `relative` (tetep ing alur normal) **mbayuh** geser menyang threshold sing panjenengan tetepake, banjur kekarepan kaya `fixed` (ngangkat ing papan) — nanging mung time **blok pangandhing** isih ana ing layar.

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

Nilai `top` (utawa `bottom`/`left`/`right`) punika **kudu ana** — nandak threshold. Bedane, sticky ora ngadeg apa.

## Cakupan: ngangkat mung ing induk

Unsur sticky punika karanggo menyang **wadah induk**. Ngangkat nalika geser *lumebu* wadah kuwi, banjur geser menyang adoh wektu dhasar induk lumampas. Iki kang ndadekake "header bagian sticky" bisa ngadeg — saben header ngangkat mung nalika bagian dheweke ana ing tingal.

## Kenapa umum "ora bisa" — kasus kegagalan

**1. Leluhur gawe `overflow: hidden/auto/scroll`.** Iki dadi penyebab #1. Posisi sticky rusak dening leluhur sing bisa geser, amarga unsur ngangkat relatif marang *iku* wadah geser, dudu kaca:

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

**2. Induk ora cukup dhuwur.** Sticky mung bisa ngadeg yen induk luwih dhuwur saka unsur sticky — yen induk setinggi biji, ora ana sing bisa digeser, dadi ora bakal keaton ngangkat.

**3. Ora ana threshold sing ditetapake.** Lali `top`/`bottom` tenan dadi ora ana titik ngangkat.

**4. Pembatas dhuwur ing induk** (kayata induk flex sing ngulur unsur) bisa uga ngilangi papan geser.

## Daftar serep debug

```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?
```

## Napa penting

`position: sticky` dadi daya header sticky, header tabel, sidebar, lan UI "scrollspy" tanpa JavaScript.

Nanging sifat istiméwa – utamane yen `overflow` ing *salah sawijining* leluhur emoh ngrusakno – ndadekake dadi sumber gampang "napa iki ora ngangkat?" debug.

Ngerti cakupan blok pangandhing lan jebakan overflow punika kang tumungkulake panjenengan ngginakake kanthi andal.

Cakupan: ngangkat mung ing induk

Kenapa umum "ora bisa" — kasus kegagalan

Daftar serep debug

Napa penting

Pitakon sing gegandhengan