Anchor Positioning

Definition

API CSS qui positionne un élément relativement à un autre (l'ancre) sans JS. Gère automatiquement le repositionnement quand l'espace manque (fallback positioning).

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;
  top: anchor(bottom);
  left: anchor(center);
  position-try: flip-block;
}

Cas d'usage

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

Termes lies