Position

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.