CSS Anchor Positioning : positionnez tooltips et menus sans JavaScript

Depuis janvier 2026, l'API CSS Anchor Positioning tourne nativement sur tous les navigateurs majeurs. Le développeur Josh W. Comeau, une référence reconnue dans l'écosystème CSS, vient de publier le 6 juillet 2026 un tutoriel complet sur le sujet, mis à jour le lendemain. Son constat est net : positionner une infobulle au-dessus d'un bouton, ou faire dérouler un menu sous son déclencheur, ne nécessite plus une seule ligne de JavaScript.

Pour une agence comme la nôtre qui livre des interfaces sur mesure, ce genre d'évolution mérite qu'on s'y arrête : chaque dépendance JavaScript en moins, c'est un bundle plus léger et une surface de bugs en moins à maintenir. Voyons concrètement ce que cette API change, et à partir de quand vous pouvez vraiment vous en servir.

Le problème que Popper.js et Floating UI résolvaient jusqu'ici

Le pattern est vieux comme le web : un élément flottant doit rester collé à un autre. Un tooltip qui affiche une info complémentaire, un menu qui se déroule sous un bouton, un popover qui s'ouvre à côté d'un champ de formulaire. Coller l'élément, ce n'est pas le problème. Le problème, ce sont les cas limites : que se passe-t-il si le bouton se trouve tout en haut de l'écran et que le tooltip n'a plus la place de s'afficher au-dessus sans être coupé ?

Jusqu'ici, la réponse passait presque toujours par une librairie JavaScript : Popper.js, puis son successeur Floating UI, chargées de calculer la position idéale à chaque rendu et de la recalculer au scroll ou au redimensionnement de la fenêtre. Du code utile, mais aussi une dépendance de plus à installer, mettre à jour et charger sur chaque page.

Comment ça marche : trois propriétés suffisent

L'Anchor Positioning API attaque le problème directement en CSS, sans passer par le DOM depuis JavaScript. Le principe repose sur deux rôles : l'élément ancre, celui auquel on veut coller quelque chose, et l'élément cible, celui qui flotte. La cible doit obligatoirement être en position: absolute ou position: fixed, cette API est une extension du positionnement classique, pas un remplacement.

• anchor-name sur l'élément ancre : vous lui donnez un nom unique, façon identifiant CSS (par exemple --mon-ancre).
• position-anchor sur l'élément cible : vous référencez ce même nom pour dire « c'est celui-ci mon point d'ancrage ».
• position-area sur l'élément cible : vous définissez où la cible doit se placer par rapport à l'ancre, en imaginant une grille de 3x3 cases autour de celle-ci (top, bottom, left, right, center, et leurs combinaisons).

Un exemple minimal, directement inspiré du tutoriel de Josh W. Comeau :

.anchor {
  anchor-name: --example-anchor;
}

.target {
  position: absolute;
  position-anchor: --example-anchor;
  position-area: top;
  margin-bottom: 8px; /* pas de gap : on ajuste avec margin */
}

Notez le détail sur la marge : il n'existe pas (encore) de propriété type gap pour espacer l'ancre et sa cible. Par défaut, la cible vient se coller directement contre l'ancre, et c'est un simple margin qui crée l'espacement visuel.

Le vrai gain : la gestion automatique des débordements

C'est, à notre sens, le point le plus important du tutoriel : cette API est dynamique. Si l'espace vient à manquer (fenêtre réduite, ancre proche du bord de l'écran), le navigateur recalcule lui-même le positionnement pour éviter que la cible ne déborde de son conteneur. C'est exactement le travail que Popper.js et Floating UI faisaient en JavaScript, recalcul au scroll compris, désormais pris en charge nativement par le moteur de rendu.

Pour aller plus loin, l'API propose aussi des propriétés logiques (inline-start plutôt que left), utiles si votre site gère plusieurs sens d'écriture, ainsi que des mots-clés span pour étaler une cible sur deux cases de la grille plutôt qu'une seule.

Autre curiosité mentionnée par Josh W. Comeau : la propriété border-shape, tout juste sortie, permet de carver une forme directement dans la bordure d'un élément (par exemple une pointe de tooltip), avec un effet qui suit ensuite border et box-shadow. Elle n'est pour l'instant disponible que sur les navigateurs Chromium en juillet 2026, un bon candidat pour un fallback en clip-path.

Où en est le support navigateur en juillet 2026

L'Anchor Positioning API est supportée par tous les navigateurs majeurs depuis janvier 2026 : elle est arrivée dans Chromium dès le milieu de l'année 2024, dans Safari en septembre 2025, et Firefox a été le dernier à l'implémenter. Malgré cette couverture, le support global reste, selon caniuse, autour de 81% des utilisateurs en juillet 2026. Une révision plus récente de la spécification, la version level 2, ne couvre elle qu'environ 64% des utilisateurs.

Concrètement, cela veut dire une chose : si votre audience inclut une part significative de navigateurs plus anciens, l'Anchor Positioning API ne peut pas encore remplacer entièrement votre solution actuelle. Elle s'utilise en complément, avec une détection de fonctionnalité et un repli propre :

@supports (anchor-name: --test) {
  .target {
    position: absolute;
    position-anchor: --example-anchor;
    position-area: top;
  }
}

Notre lecture chez CZSyn

Sur les projets où nous contrôlons l'environnement de rendu (back-office interne, intranet, extension navigateur, application sur poste maîtrisé), l'Anchor Positioning API est déjà exploitable telle quelle : c'est autant de JavaScript en moins à livrer et à maintenir, pour un résultat plus fiable que du positionnement manuel en position: fixed calculé à la main.

Sur un site public grand public, avec un support à 81% et une part non négligeable de visiteurs sur des navigateurs plus anciens, notre recommandation reste la prudence : gardez Floating UI ou Popper.js comme solution principale, et introduisez l'Anchor Positioning API en amélioration progressive via @supports, plutôt que de retirer votre librairie du jour au lendemain. Pour une PME française qui refond son design system ou son composant de tooltips, c'est en revanche le bon moment pour commencer à l'expérimenter en interne : la trajectoire du support est claire, et le jour où vous pourrez retirer la dépendance JS approche vite.

Sources primaires

• Josh W. Comeau, « Getting Started with Anchor Positioning », 6 juillet 2026 (mis à jour le 7 juillet 2026).
• MDN Web Docs, « CSS anchor positioning ».
• Can I use, données de support navigateur « CSS Anchor Positioning ».