Anchor Positioning

Définition

API CSS qui positionne un élément par rapport à un autre (l'ancre) sans JavaScript, avec repli automatique quand l'espace manque. Livrée dans Chrome 125, elle est Baseline « Newly available » depuis janvier 2026 (Firefox 147, Safari 26). Les noms actuels sont position-area et position-try-fallbacks.

Analogie

Comme un post-it attaché à un objet spécifique sur un bureau : il suit l'objet et se déplace si l'espace manque.

Exemple de code

.trigger { anchor-name: --btn; }
.tooltip {
  position: fixed;
  position-anchor: --btn;
  position-area: block-end center; /* sous le bouton */
  position-try-fallbacks: flip-block;
}

Cas d'usage

Positionner des tooltips, popovers et menus contextuels par rapport à leur déclencheur sans Floating UI.

Anti-pattern

Termes liés

Sources

• developer.chrome.com/blog/anchor-positioning-api
• developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/anchor-name