Evaluez votre site web

Anchor Positioning en CSS : Guide complet

Mathilde Arconte

26/06/2026

Introduction

L’anchor positioning en CSS est une innovation majeure qui permet de positionner un élément précisément par rapport à un autre, appelé ancre, directement avec du CSS. Cette fonctionnalité répond à un besoin courant dans la conception d’interfaces modernes : lier visuellement des éléments comme des menus, tooltips, popovers ou overlays à leur déclencheur ou à une référence sur la page.

Avant l’apparition de l’anchor positioning, il fallait souvent recourir à des solutions JavaScript complexes ou à des structures HTML imbriquées. Désormais, grâce à cette nouvelle API CSS, il devient possible d’associer deux éléments, de les faire interagir dynamiquement et de garantir que le positionnement reste correct même en cas de scroll, de redimensionnement ou de changement de contexte.

L’anchor positioning simplifie donc la création de composants interactifs et améliore la robustesse des interfaces utilisateur. Elle ouvre la voie à des menus contextuels, des infobulles ou des overlays toujours parfaitement alignés avec leur élément de référence, tout en réduisant la dépendance au JavaScript et en optimisant la performance des sites web.

Principes de base

L’anchor positioning en CSS repose sur deux rôles principaux : les éléments d’ancrage (anchors) et les éléments positionnés (targets).

  • Anchor : élément de référence auquel d’autres éléments peuvent se rattacher pour leur positionnement. On le définit grâce à la propriété CSS anchor-name.
  • Target : élément que l’on souhaite positionner précisément par rapport à l’ancre. On l’associe à son ancre avec la propriété position-anchor.

Les nouvelles propriétés CSS

Trois nouveautés majeures permettent d’utiliser l’anchor positioning :

  • anchor-name : attribue un nom à l’élément qui servira d’ancre. Ce nom doit commencer par deux tirets, comme une custom property CSS.
  • position-anchor : indique à l’élément cible à quelle ancre se rattacher.
  • La fonction anchor() : permet de positionner le target sur un côté précis de l’ancre (top, bottom, left, right, etc.) ou de récupérer ses dimensions.

Exemple simple :

<div class="anchor">Anchor</div>

<div class="target">Target</div>
HTML
.anchor {

  anchor-name: --my-anchor;

}

.target {

  position: absolute;

  position-anchor: --my-anchor;

  top: anchor(bottom); /* positionne le haut du target sur le bas de l’ancre */

  left: anchor(left);  /* aligne à gauche */

}
CSS

Dans cet exemple, .target sera toujours positionné juste sous .anchor, parfaitement aligné à gauche.

Différence avec le positionnement absolu classique et les solutions JavaScript

Avant l’anchor positioning, positionner un élément par rapport à un autre nécessitait d’utiliser position: absolute ou fixed et de calculer manuellement la position, souvent avec du JavaScript. Le target était positionné par rapport à son conteneur le plus proche ayant un positionnement, mais pas directement par rapport à un autre élément arbitraire.

Avec l’anchor positioning, le CSS connaît la position et la taille de l’ancre. Il devient possible de rattacher n’importe quel élément à n’importe quel autre, sans scripts supplémentaires. Cela simplifie énormément la création de tooltips, menus contextuels, overlays et autres composants dynamiques, tout en rendant le code plus lisible et plus robuste.

Syntaxe et premiers exemples

L’anchor positioning en CSS repose sur trois éléments clés : la déclaration d’une ancre avec anchor-name, l’association d’un élément cible avec position-anchor, et l’utilisation de la fonction anchor() pour définir la position précise du target par rapport à l’ancre.

1. Déclarer un élément comme ancre avec anchor-name

Pour transformer un élément en ancre, ajoutez la propriété anchor-name et donnez-lui un nom unique, précédé de deux tirets :

.anchor-button {

  anchor-name: --anchor-el;

}
CSS

2. Associer un élément cible avec position-anchor

L’élément que vous souhaitez positionner par rapport à l’ancre doit utiliser la propriété position-anchor avec la même valeur que le nom de l’ancre :

.tooltip {

  position: absolute; /* ou fixed */

  position-anchor: --anchor-el;

}
CSS

3. Utiliser la fonction anchor() pour le positionnement

La fonction anchor() permet de placer précisément l’élément cible sur un côté de l’ancre (top, bottom, left, right, etc.). Par exemple, pour afficher une infobulle juste en dessous d’un bouton :

.tooltip {

  position: absolute;

  position-anchor: --anchor-el;

  top: anchor(bottom); /* place le haut de la tooltip sur le bas de l’ancre */

  left: anchor(left);  /* aligne à gauche */

}
CSS

Vous pouvez aussi utiliser la syntaxe explicite :

.top-left-tooltip {

  top: anchor(--anchor-el bottom);

  left: anchor(--anchor-el left);

}
CSS

Exemple simple : tooltip positionné à côté d’un bouton

<button class="anchor-button">Survolez-moi</button>

<div class="tooltip">Ceci est une info-bulle</div>
HTML
.anchor-button {

  anchor-name: --anchor-el;

  margin: 100px; /* Pour la démonstration */

}

.tooltip {

  position: absolute;

  position-anchor: --anchor-el;

  top: anchor(bottom);

  left: anchor(left);

  background: #2d6cdf;

  color: #fff;

  padding: 0.5em 1em;

  border-radius: 4px;

  white-space: nowrap;

}
CSS

Dans cet exemple, la tooltip reste toujours parfaitement alignée sous le bouton, même si la page est redimensionnée ou si le bouton se déplace. L’anchor positioning simplifie ainsi la création d’interfaces dynamiques et robustes, sans dépendre de JavaScript ou de structures HTML complexes.

Positionnements avancés avec l’anchor positioning

L’anchor positioning en CSS va bien au-delà du simple rattachement d’un élément à un autre. Elle permet des positionnements avancés grâce à l’utilisation des propriétés physiques et logiques, la gestion de plusieurs ancres, et le centrage précis des éléments par rapport à leur ancre.

Utilisation des propriétés physiques et logiques avec anchor()

L’anchor positioning s’appuie sur les propriétés de positionnement classiques (top, right, bottom, left) mais propose aussi leurs équivalents logiques (inset-block-start, inset-block-end, inset-inline-start, inset-inline-end). Cela permet d’adapter le positionnement aux langues et aux directions d’écriture différentes.

Exemple :

.notice {

  position: absolute;

  position-anchor: --anchor-el;

  right: anchor(right);

  bottom: anchor(top);

}
CSS

Pour une version logique :

.notice {

  position: absolute;

  position-anchor: --anchor-el;

  inset-inline-end: anchor(inline-end);

  inset-block-end: anchor(block-start);

}
CSS

Ces propriétés rendent le code plus robuste pour l’internationalisation et les interfaces multilingues.

Positionnement relatif à plusieurs ancres (multi-anchors)

L’anchor positioning permet de rattacher un élément à plusieurs ancres en même temps. Cela s’effectue en utilisant la fonction anchor() avec le nom de l’ancre et le côté de référence comme arguments.

Exemple :

.anchored {

  position: absolute;

  top: anchor(--one bottom);

  left: anchor(--one right);

  right: anchor(--two left);

  bottom: anchor(--two top);

}
CSS

Cette approche est très utile pour créer des éléments qui doivent rester contenus ou alignés entre deux références sur la page, par exemple pour des overlays ou des panneaux contextuels complexes.

Centrage d’un élément par rapport à son ancre (anchor-center)

Pour centrer un élément par rapport à son ancre, il existe une nouvelle valeur : anchor-center. Elle s’utilise avec les propriétés d’alignement comme justify-self, align-self, justify-items ou align-items.

Exemple :

.infobox {

  position: absolute;

  position-anchor: --anchor-el;

  bottom: anchor(top);

  justify-self: anchor-center;

}
CSS

Cette méthode garantit un centrage parfait, sans calculs manuels ni hacks CSS, même si la taille de l’ancre ou du target change.

Grâce à ces fonctionnalités avancées, l’anchor positioning offre un contrôle inédit sur la disposition des éléments liés, tout en restant simple à implémenter et performant pour les interfaces modernes.

Cas d’usage concrets de l’anchor positioning

L’anchor positioning en CSS ouvre la voie à des interfaces utilisateur modernes, dynamiques et maintenables, sans dépendance au JavaScript ou à des bibliothèques tierces. Voici les cas d’usage les plus courants où cette fonctionnalité fait la différence.

Tooltips dynamiques

Les tooltips (info-bulles) doivent apparaître à côté d’un élément déclencheur, même si celui-ci se déplace ou change de taille. Avec l’anchor positioning, il suffit de définir le bouton comme ancre et de rattacher la tooltip avec position-anchor. Le positionnement reste fiable, même lors du scroll ou du redimensionnement.

Exemple :

<button class="anchor-button">?</button>

<div class="tooltip">Aide contextuelle</div>
HTML
.anchor-button {

  anchor-name: --help-btn;

}

.tooltip {

  position: absolute;

  position-anchor: --help-btn;

  top: anchor(bottom);

  left: anchor(left);

}
CSS

Menus contextuels et dropdowns

Les menus contextuels et dropdowns doivent s’ouvrir exactement sous (ou à côté de) leur déclencheur, quelle que soit la structure du DOM. L’anchor positioning simplifie ce comportement : plus besoin de calculs JavaScript, le menu reste lié à son bouton, même dans des interfaces complexes ou multicouches.

Exemple :

<button class="anchor-menu">Menu</button>

<ul class="dropdown">

  <li>Option 1</li>

  <li>Option 2</li>

</ul>
HTML
.anchor-menu {

  anchor-name: --menu-btn;

}

.dropdown {

  position: absolute;

  position-anchor: --menu-btn;

  top: anchor(bottom);

  left: anchor(left);

}
CSS

Onboarding UI ou overlays guidés

Les interfaces d’onboarding, les overlays guidés ou les bulles d’aide doivent souvent pointer vers des éléments précis de la page, même si ceux-ci changent de place ou de taille. L’anchor positioning permet de rattacher chaque étape ou bulle à l’élément cible, garantissant un affichage toujours aligné et réactif.

Autres exemples d’interfaces courantes

L’anchor positioning est aussi utile pour :

  • Les popovers et dialogues contextuels, même au-dessus de couches modales ou dans des portails DOM.
  • Les notifications liées à un élément spécifique.
  • Les sélecteurs personnalisés, fiches d’informations, boîtes de dialogue de paramètres, etc.

Grâce à l’anchor positioning, toutes ces interfaces deviennent plus simples à implémenter, plus robustes et plus accessibles. Les développeurs peuvent désormais créer des expériences utilisateur sophistiquées sans complexité technique inutile.

Bonnes pratiques et limitations actuelles de l’anchor positioning

L’anchor positioning en CSS apporte de nouvelles possibilités, mais il est essentiel de connaître ses limites actuelles et d’adopter de bonnes pratiques pour garantir une expérience utilisateur optimale.

Compatibilité navigateur et fallback

L’anchor positioning est une fonctionnalité récente, actuellement prise en charge à partir de Chrome 125 et en phase expérimentale dans d’autres navigateurs. Pour vérifier la compatibilité, utilisez la règle :

@supports(anchor-name: --foo) {

  /* Styles utilisant anchor positioning */

}
CSS

Si le navigateur ne prend pas en charge l’API, prévoyez des solutions de repli, comme le positionnement classique avec position: absolute dans un conteneur relatif, ou l’utilisation de polyfills proposés par la communauté. Gardez à l’esprit que la spécification peut encore évoluer et que certains comportements pourraient changer à mesure que l’API se stabilise.

Accessibilité et gestion du focus

L’anchor positioning relie visuellement deux éléments, mais il ne crée pas de lien sémantique pour les technologies d’assistance. Par exemple, un tooltip positionné avec cette API ne sera pas automatiquement associé à son déclencheur pour un lecteur d’écran. Pour garantir l’accessibilité, utilisez les attributs ARIA appropriés, comme aria-describedby ou aria-labelledby, et attribuez un rôle pertinent à l’élément cible (par exemple, role="tooltip").

Exemple :

<button aria-describedby="infoTip" class="anchor">Info</button>

<div id="infoTip" role="tooltip" class="tooltip">Aide contextuelle</div>
HTML

Veillez également à gérer le focus clavier, notamment pour les menus et overlays, afin que les utilisateurs puissent naviguer facilement sans souris.

Points d’attention sur la performance et la maintenance

L’anchor positioning est conçu pour être performant car il s’intègre nativement au moteur CSS, sans nécessiter de calculs JavaScript ou de suivi manuel du DOM. Cela réduit la complexité et le risque d’erreurs lors de la maintenance. Cependant, comme la fonctionnalité est encore jeune, surveillez les éventuels bugs ou comportements inattendus lors des mises à jour de navigateur.

Pour la maintenance, documentez clairement l’utilisation des ancres et des cibles dans votre code, surtout dans les projets d’équipe. Prévoyez des tests pour vérifier le bon fonctionnement des fallback et l’accessibilité.

En résumé, l’anchor positioning offre un positionnement puissant et flexible, mais il est crucial de vérifier la compatibilité navigateur, d’assurer l’accessibilité avec les bons attributs ARIA, et de rester attentif à l’évolution de la spécification pour garantir la stabilité de vos interfaces.

Conclusion

L’anchor positioning en CSS marque une avancée majeure pour le développement d’interfaces web modernes. Cette API permet de positionner nativement des éléments par rapport à d’autres, appelés ancres, simplifiant ainsi la création de menus, tooltips, overlays, cartes, dialogues et bien plus encore. Grâce à l’anchor positioning, il devient possible de réaliser des interfaces complexes sans recourir à des bibliothèques tierces ou à des scripts JavaScript lourds, tout en gagnant en robustesse et en créativité.

Les principaux bénéfices de l’anchor positioning sont :

  • Un positionnement précis et flexible des éléments, directement via CSS.
  • Une simplification du code et une meilleure maintenabilité, car il n’est plus nécessaire de gérer manuellement la logique de placement.
  • Une compatibilité croissante avec les navigateurs modernes (à partir de Chrome 125), rendant la fonctionnalité de plus en plus accessible pour les projets actuels.
  • La possibilité de centrer, d’aligner ou de positionner un élément par rapport à une ou plusieurs ancres, avec des propriétés dédiées comme anchor-center et la fonction anchor().

Pour intégrer progressivement l’anchor positioning dans vos projets :

  • Commencez par des cas simples, comme des tooltips ou des menus contextuels, en utilisant anchor-name, position-anchor et la fonction anchor().
  • Vérifiez la compatibilité navigateur avec la règle @supports(anchor-name: --foo) et prévoyez un fallback pour les utilisateurs sur des navigateurs plus anciens.
  • Expérimentez avec des positionnements avancés (multi-ancres, centrage, overlays) pour tirer parti de toute la puissance de l’API.
  • Documentez l’utilisation des ancres dans votre code et veillez à l’accessibilité en associant correctement les éléments via les attributs ARIA lorsque nécessaire.

En adoptant l’anchor positioning, vous modernisez vos interfaces tout en réduisant la complexité technique. Cette fonctionnalité, désormais intégrée au cœur du CSS, ouvre de nouvelles perspectives pour le design web et la performance des applications.

Sources

Articles similaires