¿Cómo funciona realmente `position: sticky` y por qué a veces falla?

Question

Accepted Answer

`position: sticky` es un híbrido: un elemento se comporta como `relative` (permanece en el flujo normal) **hasta** que se desplaza a un umbral que especificas, luego se comporta como `fixed` (se adhiere en su lugar) — pero solo **mientras su bloque contenedor** aún está en pantalla.

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

El valor `top` (o `bottom`/`left`/`right`) es **requerido** — define el umbral. Sin él, sticky no hace nada.

## El alcance: se adhiere solo dentro de su padre

Un elemento sticky está confinado a su **contenedor padre**. Se adhiere mientras se desplaza *a través de* ese padre, luego se desplaza cuando la parte inferior del padre pasa. Esto es lo que hace que "los encabezados de sección pegajosos" funcionen — cada encabezado se adhiere solo mientras su propia sección está a la vista.

## Por qué comúnmente "no funciona" — los casos de fallo

**1. Un ancestro tiene `overflow: hidden/auto/scroll`.** Esta es la causa #1. El posicionamiento sticky se rompe por cualquier ancestro desplazable, porque el elemento se adhiere relative al *ese* contenedor de desplazamiento, no a la página:

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

**2. El padre no es lo suficientemente alto.** Sticky solo funciona si el padre es más alto que el elemento sticky — si el padre tiene la misma altura, no hay nada por lo que desplazarse, por lo que nunca parece adherirse.

**3. Sin umbral establecido.** Olvidar `top`/`bottom` significa sin punto de adhesión.

**4. Restricciones de altura en el padre** (p. ej. un padre flex que estira elementos) también pueden eliminar el espacio de desplazamiento.

## Lista de verificación de depuración

```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 qué es importante

`position: sticky` potencia encabezados pegajosos, encabezados de tabla, barras laterales y UI "scrollspy" sin JavaScript.

Pero sus peculiaridades — especialmente que un `overflow` en *cualquier* ancestro lo rompe silenciosamente — lo hacen una fuente frecuente de depuración de "¿por qué no se pega?".

Conocer el alcance del bloque contenedor y la trampa de overflow es lo que te permite usarlo de manera confiable.