Como position: sticky funciona na verdade e por que às vezes falha?

Question

Accepted Answer

`position: sticky` é um híbrido: um elemento se comporta como `relative` (permanece no fluxo normal) **até** que ele role para um limite que você especifica, depois se comporta como `fixed` (gruda no lugar) — mas apenas enquanto seu **bloco de contêiner** ainda estiver na tela.

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

O valor `top` (ou `bottom`/`left`/`right`) é **obrigatório** — ele define o limite. Sem ele, sticky não faz nada.

## O escopo: ele gruda apenas dentro de seu pai

Um elemento sticky está confinado ao seu **contêiner pai**. Ele gruda enquanto você rola *através* daquele pai, depois rola para longe assim que a parte inferior do pai passar. Isso é o que faz "cabeçalhos de seção sticky" funcionarem — cada cabeçalho gruda apenas enquanto sua própria seção está visível.

## Por que comumente "não funciona" — os casos de falha

**1. Um ancestral tem `overflow: hidden/auto/scroll`.** Esta é a causa #1. O posicionamento sticky é quebrado por qualquer ancestral rolável, porque o elemento gruda em relação *àquele* contêiner de rolagem, não à página:

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

**2. O pai não é alto o suficiente.** Sticky só tem espaço para grudar se o pai for mais alto que o elemento sticky — se o pai tiver a mesma altura, não há nada para rolar, então nunca parece grudar.

**3. Sem limite definido.** Esquecer `top`/`bottom` significa nenhum ponto de aderência.

**4. Restrições de altura no pai** (por exemplo, um pai flex estendendo itens) também podem remover o espaço de rolagem.

## Checklist de depuração

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

## Por que isso importa

`position: sticky` alimenta cabeçalhos sticky, cabeçalhos de tabela, barras laterais e UIs "scrollspy" sem nenhum JavaScript.

Mas suas peculiaridades — especialmente que um `overflow` em *qualquer* ancestral o quebra silenciosamente — a tornam uma fonte frequente de depuração "por que isso não gruda?".

Conhecer o escopo do bloco de contêiner e a armadilha de overflow é o que permite que você o use de forma confiável.