Utilitaires

Position

Les utilitaires de position choisissent le mode de positionnement d’un élément, puis le placent par rapport à son parent avec top, bottom, start, end et translate-middle.

Modes de positionnement#

Les cinq classes position-* correspondent aux valeurs CSS de la propriété position.

<div class="position-static">…</div>
<div class="position-relative">…</div>
<div class="position-absolute">…</div>
<div class="position-fixed">…</div>
<div class="position-sticky">…</div>

Placer un élément dans un coin#

Le parent est en position-relative ; l’enfant est en position-absolute et se cale avec top-0, start-0, end-0 ou bottom-0.

Haut gauche Haut droite Bas gauche Bas droite

<div class="position-relative bg-body-secondary border" style="height: 10rem">
  <span class="position-absolute top-0 start-0 badge text-bg-primary m-2">Haut gauche</span>
  <span class="position-absolute top-0 end-0 badge text-bg-primary m-2">Haut droite</span>
  <span class="position-absolute bottom-0 start-0 badge text-bg-primary m-2">Bas gauche</span>
  <span class="position-absolute bottom-0 end-0 badge text-bg-primary m-2">Bas droite</span>
</div>

Centrer avec translate-middle#

Placez le coin de l’élément à 50 % avec top-50 start-50, puis recentrez-le avec translate-middle (ou translate-middle-x / translate-middle-y pour un seul axe).

Centré

Centré horizontalement

Centré verticalement

<div class="position-relative bg-body-secondary border" style="height: 10rem">
  <div class="position-absolute top-50 start-50 translate-middle text-bg-primary p-2">Centré</div>
</div>
<div class="position-relative bg-body-secondary border mt-3" style="height: 5rem">
  <div class="position-absolute top-0 start-50 translate-middle-x text-bg-success p-2">Centré horizontalement</div>
</div>
<div class="position-relative bg-body-secondary border mt-3" style="height: 5rem">
  <div class="position-absolute top-50 start-0 translate-middle-y text-bg-info p-2">Centré verticalement</div>
</div>

Pastille de notification sur un bouton#

Un cas courant : une pastille posée sur l’angle d’un bouton. Le texte caché précise le sens du nombre aux lecteurs d’écran.

<button type="button" class="btn btn-primary position-relative">
  Messages
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
    3
    <span class="visually-hidden">nouveaux messages non lus</span>
  </span>
</button>

Classes disponibles

Classes disponibles
Classe	Effet
`position-static`, `position-relative`, `position-absolute`, `position-fixed`, `position-sticky`	Définissent la propriété `position`.
`top-0`, `top-50`, `top-100`	Valeur de `top` : 0, 50 % ou 100 %.
`bottom-0`, `bottom-50`, `bottom-100`	Valeur de `bottom`.
`start-0`, `start-50`, `start-100`	Valeur de `left` (début de ligne).
`end-0`, `end-50`, `end-100`	Valeur de `right` (fin de ligne).
`translate-middle`	`transform: translate(-50%, -50%)` : centre sur les deux axes.
`translate-middle-x`	`transform: translateX(-50%)`.
`translate-middle-y`	`transform: translateY(-50%)`.

Variables Sass

Les valeurs de top, bottom, start et end viennent de la carte Sass $position-values (0, 50% et 100%). Ajoutez-y des entrées pour générer d’autres classes, par exemple 25 pour top-25. Pour les barres fixées en haut ou en bas de l’écran (fixed-top, sticky-top…), voyez Positionnement.

Bonnes pratiques

À faire

Placez toujours un parent en position-relative avant d’utiliser position-absolute sur un enfant, sinon il se cale sur la page.

À éviter

N’empilez pas des éléments en position-fixed sans prévoir de marge : ils masquent le contenu qui défile dessous.

Accessibilité

L’ordre de lecture suit le HTML, pas la position visuelle : gardez un ordre logique dans le code.
Un badge positionné qui porte une information doit contenir un texte visually-hidden pour l’expliquer.