Comment fonctionne vraiment position: sticky, et pourquoi échoue-t-il parfois ?

Question

Accepted Answer

`position: sticky` est un hybride : un élément se comporte comme `relative` (reste dans le flux normal) **jusqu'à** ce qu'il défile jusqu'à un seuil que vous spécifiez, puis se comporte comme `fixed` (se fixe en place) — mais seulement tant que son **bloc contenant** est encore visible à l'écran.

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

La valeur `top` (ou `bottom`/`left`/`right`) est **requise** — elle définit le seuil. Sans elle, sticky ne fait rien.

## L'étendue : il se fixe uniquement dans son parent

Un élément sticky est confiné à son **conteneur parent**. Il se fixe en défilant *à travers* ce parent, puis défile loin une fois que le bas du parent passe. C'est ce qui permet aux « en-têtes de section sticky » de fonctionner — chaque en-tête se fixe uniquement tant que sa propre section est visible.

## Pourquoi ça « ne fonctionne pas » souvent — les cas d'échec

**1. Un ancêtre a `overflow: hidden/auto/scroll`.** C'est la cause #1. Le positionnement sticky est rompu par n'importe quel ancêtre à défilement, car l'élément se fixe par rapport à *ce* conteneur de défilement, pas à la page :

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

**2. Le parent n'est pas assez grand.** Sticky n'a de place pour se fixer que si le parent est plus grand que l'élément sticky — si le parent a la même hauteur, il n'y a rien à faire défiler, donc il ne semble jamais se fixer.

**3. Aucun seuil défini.** Oublier `top`/`bottom` signifie aucun point de fixation.

**4. Les contraintes de hauteur sur le parent** (par exemple un parent flex qui étire les éléments) peuvent aussi supprimer l'espace de défilement.

## Liste de contrôle de débogage

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

## Pourquoi c'est important

`position: sticky` alimente les en-têtes sticky, les en-têtes de tableau, les barres latérales et les interfaces « scrollspy » sans JavaScript.

Mais ses particularités — notamment le fait qu'un `overflow` sur *n'importe quel* ancêtre le casse silencieusement — en font une source fréquente de débogage « pourquoi ça ne se fixe pas ? ».

Connaître l'étendue du bloc contenant et le piège de l'overflow est ce qui vous permet de l'utiliser de façon fiable.