jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur CSS anchor positioning

Générez des règles CSS anchor positioning pour les tooltips, menus deroulants et callouts.

Chargement de l'outil...

Qu'est-ce que Generateur CSS anchor positioning ?

Le positionnement par ancrage CSS permet d'attacher un element a un autre en utilisant uniquement CSS. Vous assignez un anchor-name a l'element ancre et utilisez position-anchor sur l'element positionne. Cela elimine le besoin de bibliotheques de positionnement JavaScript pour les infobulles, les menus deroulants et les popovers. C'est une nouvelle fonctionnalite CSS prise en charge dans Chrome 125+.

Réponse rapide

Le positionnement par ancrage permet d'attacher un element a un autre element de la page en utilisant uniquement CSS, sans JavaScript. Il remplace la plupart des calculs de position manuels pour les infobulles, les popovers et les menus deroulants.

Last updated: 2026-05-25

Limites

  • Le positionnement par ancrage n'est pris en charge que dans Chrome 125+. Firefox et Safari ne le prennent pas encore en charge debut 2026.
  • L'element ancre doit etre un ancetre DOM ou reference par anchor-name. Les elements dans différentes racines shadow peuvent ne pas fonctionner.
  • Le positionnement de repli avec position-fallback est experimental et son comportement varie selon les navigateurs compatibles.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Definissez un nom d'ancrage pour l'element declencheur en utilisant la propriete anchor-name.
  2. Choisissez la zone de positionnement pour l'element ancre par rapport au declencheur.
  3. L'outil genere le CSS pour l'ancrage et l'element positionne.
  4. Copiez le CSS et associez-le a votre HTML de declencheur et de popover.

A quoi il sert

  • Positionner une infobulle qui suit un bouton ou un lien.
  • Creer un menu deroulant aligne sur son element declencheur.
  • Construire un encart qui pointe vers un element d'interface utilisateur specifique sur la page.

Cas d'usage

Exemples concrets

Exemple

Infobulle de bouton avec positionnement par ancrage

Une infobulle apparaît au-dessus d'un bouton en utilisant position-area: top et position-anchor. L'infobulle reste alignee sur le bouton independamment de la mise en page environnante.

Exemple

Menu deroulant de navigation

Un menu deroulant s'ancrage au bas de son element de navigation declencheur, suivant automatiquement la position du declencheur sur la page.

Erreurs frequentes

  • Ne pas fournir de solution de repli pour les navigateurs qui ne prennent pas en charge le positionnement par ancrage.
  • Utiliser le positionnement par ancrage pour du contenu qui doit rester accessible lorsque CSS est desactive.
  • Oublier que l'element ancre et l'element positionne doivent etre dans le meme bloc englobant.

Vérification

  1. Testez l'element positionne dans Chrome et verifiez qu'il suit correctement l'element ancre lors du defilement et du redimensionnement.
  2. Fournissez une solution de repli basee sur JavaScript pour les navigateurs non compatibles, en utilisant par exemple getBoundingClientRect() pour positionner l'element.

FAQ

Questions sur Generateur CSS anchor positioning

Quels navigateurs prennent en charge le positionnement par ancrage ?

Chrome 125+, Edge 125+. Safari et Firefox developpent la prise en charge. Fournissez une position de repli pour les navigateurs non compatibles.

Le positionnement par ancrage fonctionne-t-il avec l'API Popover ?

Oui. Les popovers peuvent utiliser le positionnement par ancrage pour s'aligner sur leur element declencheur.

Comment definir un element d'ancrage pour le positionnement par ancrage CSS ?

Definissez la propriete CSS anchor-name sur l'element ancre : anchor-name: --my-anchor;. Ensuite, referencez-le sur l'element positionne avec position-anchor: --my-anchor; et utilisez les fonctions anchor() pour le positionnement. L'element ancre et l'element positionne peuvent se trouver n'importe ou dans le DOM.

Que se passe-t-il lorsque l'element ancre sort de la fenetre par defilement ?

Par defaut, l'element positionne suit l'ancrage et peut egalement sortir de la fenetre. Pour le maintenir visible, combinez le positionnement par ancrage avec position: fixed ou utilisez la propriete position-try-options pour specifier des positions de repli.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi