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.
25821 shaares