Le positionnement par ancre (anchor positioning) est une nouvelle fonctionnalité CSS qui permet de positionner visuellement un élément par rapport à un autre, indépendamment de leur place dans le DOM. Idéal pour les info-bulles, menus contextuels ou modales, il utilise anchor-name pour définir une ancre et position-anchor pour l’associer à un élément positionné (en absolute ou fixed). Le placement s’effectue via anchor() ou position-area, tandis que anchor-size() permet d’adapter les dimensions de l’élément en fonction de l’ancre. La propriété position-try gère les débordements en proposant des solutions de repli. Compatible avec les navigateurs modernes, cette technique offre une alternative flexible aux méthodes traditionnelles, tout en nécessitant une attention particulière à l’accessibilité. Des outils comme Anchor Tool et des démos pratiques illustrent son potentiel.
L’article explique comment CSS Anchor Positioning révolutionne le positionnement des éléments en permettant de lier un élément cible à un ancrage précis, indépendamment de leur relation parent-enfant dans le DOM. Contrairement à position: absolute, qui nécessite souvent une restructuration du HTML ou des calculs fragiles, cette nouvelle API permet de définir un ancrage (anchor-name) sur un élément et de positionner un autre élément (position-anchor) par rapport à ses bords (top, right, bottom, left) ou à une grille 3x3 (position-area). Elle offre aussi des mécanismes de repli intelligents (position-try-fallbacks) pour éviter les débordements hors de la viewport, comme basculer automatiquement un popup du haut vers le bas si l’espace manque. Idéal pour des composants dynamiques et responsives, cette technique simplifie des cas d’usage complexes (tooltips, badges, menus contextuels) sans JavaScript, même si son support reste limité aux navigateurs basés sur Chromium pour l’instant.
Très joli
Tout est dans le titre
Vivement que cette possibilité se développe
Tout est dans le titre
Eric Meyer montre l'utilisation du "anchor positioning" pour résoudre un problème de design.