Conas a oibríonn position: sticky i ndáiríre, agus cén fáth a dteipeann sé uaireanta?

Question

Accepted Answer

`position: sticky` is a hybrid: an element behaves like `relative` (stays in normal flow) **until** it scrolls to a threshold you specify, then behaves like `fixed` (sticks in place) — but only while its **containing block** is still on screen.

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

The `top` (or `bottom`/`left`/`right`) value is **required** — it defines the threshold. Without it, sticky does nothing.

## An scóip: greamaithe dó a bhíonn sé laistigh dá thuismitheoir amháin

Tá eilimint ghreamaithe teoranta dá **phríomh-ionad**. Greamaithe dó a bhíonn sé agus é ag scrolláil *trí* an tuismitheoir sin, agus ansin scrolláilte ar shiúl tar éis don bhun an tuismitheora imeall an scáileáin a fhágáil. Seo an rud a fhágann go n-oibríonn "sticky section headers" — níl greamaithe ag gach ceanntásc ach agus an chuid féin sin ar fhéachaint.

## Cén fáth ar theipeann sé go coitianta — na cásanna teipthe

**1. Tá `overflow: hidden/auto/scroll` ar fhondúir ar bith.** Seo an chúis #1. Briseadh a dhéantar ar position sticky ag aon fhondúir scrollable, toisc go bhfuil an eilimint greamaithe i gcoibhneas *leis an* scroll container sin, ní leis an leathanach:

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

**2. Níl an tuismitheoir ard go leor.** Níl sticky ag fáil spáis ar bith le greamaithe dó ach amháin más ard an tuismitheor níos airde ná an eilimint ghreamaithe — má tá an tuismitheor ar an aer céanna, níl faic ann le scrolláil tríd, mar sin ní bhíonn sé greamaithe go deo.

**3. Níl aon sparán socraithe.** Dearmad ar `top`/`bottom` a chiallaíonn aon bhreac greamaithe.

**4. Srianta airde ar an tuismitheoir** (m.sh. tuismitheor flex ag síneadh iontrálacha) is féidir an spás scrolláil a bhaint freisin.

## Liosta seiceála dhíbeartha

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

## Cén fáth a bhíonn tábhacht ann

`position: sticky` a chumhachtaíonn sticky headers, table headers, sidebars, agus "scrollspy" UIs gan aon JavaScript.

Ach a chuid aisteachaithe — go háirithe gur briseadh sileadh a dhéantar ar `overflow` ar *aon* fhondúir — déanann sé foinse thapaidh de "cén fáth nach bhfuil sé greamaithe?" díbhéartha.

An containing-block scope agus an overflow trap a bheith ar eolas agat a thugann duit a úsáid ar bhealach iontaofa.