Le positionnement par ancre : anchor positioning

Raphael - Alsacreations - 29/09

Positionner en CSS a souvent été une mission hasardeuse. Flexbox et Grid ont grandement simplifié la tâche, mais il reste des cas où le positionnement précis d'un élément par rapport à un autre demeure un véritable casse-tête. C'est là qu'intervient le positionnement par ancre (anchor positioning), une nouvelle fonctionnalité CSS qui permet de placer visuellement n'importe quel élément par rapport à n'importe quel autre élément, sans avoir à se soucier de la structure du DOM.

Le positionnement par ancre va se révéler particulièrement utile pour :

  • Les info-bulles : afficher des informations supplémentaires lorsqu'on survole un élément.
  • Les menus contextuels : ouvrir un menu à côté d'un bouton ou d'une zone spécifique.
  • Les fenêtres modales : positionner un dialog (une modale) par rapport à un élément déclencheur.
  • Les étiquettes de formulaire : placer des messages d'erreur ou des indications près des champs concernés.

⚠️ Attention : une ancre et un élément positionné éloignés dans le DOM vont poser des problèmes d'accessibilité, avec les lecteurs d'écran en particulier.

Compatibilité navigateurs (et @supports)

Voici le tableau de compatibilité pour le positionnement par ancre :

Support navigateurs pour CSS Anchor Positioning (source Can I Use)

Afin de permettre un support p...
[Courte citation de 8% de l'article original]