Quelles sont les valeurs de position CSS ?

Question

Accepted Answer

`position` contrôle la façon dont un élément est placé et si les propriétés de décalage (`top`/`right`/`bottom`/`left`) s'appliquent.

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute : l'appairage clé

`absolute` positionne un élément par rapport à son **ancêtre positionné le plus proche** (tout sauf `static`). Vous définissez donc `position: relative` sur un parent pour en faire le point de référence :

```css
.card {
  position: relative;   /* becomes the positioning context */
}
.badge {
  position: absolute;   /* positioned relative to .card */
  top: 8px;
  right: 8px;           /* pins the badge to the card's top-right corner */
}
```

Ce motif parent-relative / enfant-absolute est partout : badges, menus déroulants, info-bulles, boutons de fermeture.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — verrouillé à la fenêtre d'affichage (toujours visible), par exemple une barre de navigation persistante.
- **sticky** — agit de manière relative jusqu'à atteindre le seuil (`top: 0`), puis y reste tant que son conteneur est visible — idéal pour les en-têtes de section.

## Un piège courant

Les éléments `absolute`/`fixed` sont **retirés du flux normal**, donc ils ne réservent pas d'espace — les frères et sœurs agissent comme s'ils n'existaient pas, ce qui peut causer des chevauchements. Planifiez cela (par exemple, ajoutez du remplissage pour compenser une barre de navigation fixe).

## Pourquoi c'est important

`position` est essentiel pour les superpositions, les en-têtes collants, les modales, les menus déroulants et les badges.

La relation parent-relative/enfant-absolute et la distinction fixed-vs-sticky constituent le cœur pratique que vous utilisez constamment.