# Position

> La propriété CSS position détermine comment un élément est placé dans la page : dans le flux normal, décalé, ou retiré du flux pour être positionné par rapport à un repère.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/position-css/

Placer un bloc « où on veut » sur une page passe presque toujours par la propriété `position`. Elle accepte cinq valeurs principales : `static` (le comportement par défaut, l'élément suit le flux du document), `relative` (l'élément reste dans le flux mais peut être décalé visuellement avec `top`, `left`, `right`, `bottom`), `absolute` (l'élément sort du flux et se positionne par rapport à son ancêtre positionné le plus proche), `fixed` (positionné par rapport à la fenêtre du navigateur, ne bouge pas au défilement) et `sticky` (hybride entre relatif et fixe, qui « colle » une fois un seuil de défilement atteint).

## Dans WordPress

Le thème par défaut et de nombreux blocs de l'éditeur (bloc Groupe, bloc Colonnes) exposent des réglages de position via l'interface, mais en coulisses ce sont ces mêmes valeurs CSS qui sont écrites dans les classes ou le style en ligne du bloc. Un thème de blocs peut aussi définir des styles de position dans `theme.json` ou dans les feuilles de style d'un thème enfant, par exemple pour rendre un en-tête collant avec `position: sticky` sur la partie de gabarit concernée.

## Exemple

```
.badge-nouveaute {
  position: absolute;
  top: 8px;
  right: 8px;
}
.carte {
  position: relative; /* sert de repère au badge */
}
```

## Pièges fréquents

- Un élément en `position: absolute` se cale sur le premier ancêtre dont la position n'est pas `static` ; oublier de poser `position: relative` sur le parent fait remonter le repère jusqu'au document entier.
- `position: sticky` ne fonctionne pas si un parent a `overflow: hidden` ou `overflow: auto`, ce qui piège souvent les colonnes de l'éditeur de blocs.
- Changer la position d'un élément modifie aussi son contexte d'empilement et donc l'ordre d'affichage avec `z-index`.