CSS anchor positioning : ce que ça fait, et pourquoi MDN parle encore de disponibilité limitée

Le positionnement par ancre en CSS permet de rattacher un élément positionné en absolu à un autre élément, de sorte qu'une infobulle suive son bouton sans une ligne de JavaScript. C'est réellement élégant. C'est aussi, d'après la bannière de MDN elle-même, quelque chose que vous ne pouvez pas encore livrer sans condition - et beaucoup de ce qui a été publié en 2026 affirme le contraire.

Les trois pièces

Le modèle est simple. Vous nommez un élément comme ancre, vous pointez un autre élément vers ce nom, et vous positionnez par rapport à lui.

.trigger {
  anchor-name: --my-trigger;
}

.tooltip {
  position: absolute;
  position-anchor: --my-trigger;
  top: anchor(bottom);
  left: anchor(left);
}

anchor-name enregistre l'élément sous un identifiant personnalisé. position-anchor associe l'élément positionné à cet identifiant. La fonction anchor() se résout ensuite en un bord de l'ancre : anchor(bottom) désigne le bord inférieur de l'ancre exprimé dans le repère de l'élément positionné.

Ce qui en fait plus qu'un sucre syntaxique, c'est le comportement près du bord de la fenêtre. Une infobulle épinglée sous son déclencheur devrait basculer au-dessus plutôt que d'être rognée, et ce basculement est exactement la logique pour laquelle existent toutes les bibliothèques de positionnement. Le positionnement par ancre l'offre de façon déclarative via les positions de repli : vous listez des placements alternatifs, et le navigateur retient le premier qui tient.

Pourquoi l'enthousiasme a devancé le support

Chrome a livré le positionnement par ancre en 2024, et une vague d'articles a suivi pour annoncer que le CSS natif avait remplacé les bibliothèques d'infobulles. Cherchez le sujet en 2026 et vous trouverez des affirmations de statut Baseline et des pourcentages de couverture dans les quatre-vingt-dix.

La page MDN de position-anchor porte actuellement une autre bannière : disponibilité limitée, avec l'explication que cette fonctionnalité n'est pas Baseline parce qu'elle ne fonctionne pas dans certains des navigateurs les plus utilisés. C'est la documentation de référence de la propriété elle-même, et c'est la ligne à retenir quand les sources secondaires la contredisent.

Ce n'est pas une raison d'ignorer la fonctionnalité. C'est une raison d'aller vérifier vous-même la bannière sur MDN, le jour où vous prévoyez de livrer, plutôt que d'hériter d'une affirmation d'un article qui était optimiste au moment de sa rédaction.

Comment l'utiliser sans parier dessus

Passez par une requête de fonctionnalité. @supports fait la différence entre une amélioration progressive et une mise en page cassée pour qui se trouve sur le mauvais moteur :

.tooltip {
  /* placement de repli qui fonctionne partout */
  position: absolute;
  top: 100%;
  left: 0;
}

@supports (anchor-name: --x) {
  .trigger { anchor-name: --my-trigger; }
  .tooltip {
    position-anchor: --my-trigger;
    top: anchor(bottom);
    left: anchor(left);
  }
}

Écrivez d'abord le positionnement ordinaire, puis laissez la version ancrée le surcharger à l'intérieur de la requête. Les navigateurs qui comprennent l'ancrage obtiennent le bon comportement ; les autres obtiennent quelque chose qui fonctionne quand même.

Le résumé honnête de la situation : le positionnement par ancre va dans la bonne direction et mérite d'être appris dès maintenant, mais une infobulle de production en 2026 a encore besoin d'un chemin pour les moteurs qui ne le supportent pas. Supprimer la bibliothèque purement et simplement est une décision à prendre depuis le tableau de compatibilité, pas depuis un titre d'article.

Sa place dans le reste de la plateforme

Le positionnement par ancre s'associe naturellement à l'API Popover, qui gère l'affichage et la fermeture pendant que l'ancrage gère le placement, et à l'élément dialog pour les cas qui demandent une vraie fenêtre modale. Ces deux-là sont plus avancés côté support, ce qui explique en partie pourquoi il vaut mieux s'y appuyer d'abord.

En bref

anchor-name désigne l'ancre, position-anchor s'y connecte, anchor() en résout les bords, et les positions de repli gèrent le basculement près d'un bord de fenêtre. MDN classe la propriété en disponibilité limitée et explicitement hors Baseline. Utilisez-la derrière @supports, gardez un repli ordinaire, et consultez le tableau de compatibilité le jour où vous livrez plutôt que de vous fier à un pourcentage lu dans un billet de blog.