anchor-name

Baseline 2026

Newly available

Depuis January 2026, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

La propriété CSS anchor-name permet de définir un élément comme élément d'ancre en lui attribuant un ou plusieurs noms d'ancre. Chaque nom peut ensuite être utilisé comme valeur de la propriété position-anchor d'un élément positionné pour l'associer à l'ancre.

Syntaxe

css

/* Valeurs uniques */
anchor-name: none;
anchor-name: --name;

/* Valeurs multiples */
anchor-name: --name, --another-name;

/* Valeurs globales */
anchor-name: inherit;
anchor-name: initial;
anchor-name: revert;
anchor-name: revert-layer;
anchor-name: unset;

Valeurs

none: Valeur par défaut. Définir anchor-name: none sur un élément signifie qu'il n'est pas défini comme élément d'ancre. Si l'élément était précédemment défini comme ancre et associé à un élément positionné, définir anchor-name: none dissocie les deux.
<dashed-ident>: Un ou plusieurs identifiants personnalisés séparés par des virgules, définissant le ou les noms de l'ancre, qui peuvent ensuite être référencés dans une propriété position-anchor.

Description

Pour positionner un élément par rapport à un élément d'ancre, l'élément positionné requiert trois caractéristiques : une association, une position et un emplacement. Les propriétés anchor-name et position-anchor fournissent une association explicite.

L'élément d'ancre accepte un ou plusieurs noms d'ancre <dashed-ident> définis via la propriété anchor-name. Lorsqu'un de ces noms est ensuite utilisé comme valeur de la propriété position-anchor d'un élément ayant sa propriété position définie à absolute ou fixed, les deux éléments sont associés. Ils deviennent liés en définissant un emplacement sur l'élément associé par rapport à l'ancre, ce qui en fait un « élément positionné par ancre ».

Si plusieurs éléments d'ancre partagent le même nom d'ancre, et que ce nom est référencé par la propriété position-anchor d'un élément positionné, cet élément sera associé au dernier élément d'ancre portant ce nom dans l'ordre du DOM.

Le positionnement par ancre modifie le bloc englobant des éléments positionnés par ancre, rendant leur position relative à leur ancre plutôt qu'au plus proche ancêtre positionné.

Pour lier et placer un élément positionné à un emplacement précis par rapport à un élément d'ancre, une fonctionnalité de positionnement par ancre est nécessaire, comme la fonction anchor() (utilisée dans la valeur d'une propriété d'encart) ou la propriété position-area.

Vous ne pouvez pas associer un élément positionné à une ancre si l'ancre est masquée, par exemple avec display: none ou visibility: hidden, ou si l'ancre fait partie du contenu ignoré d'un autre élément à cause de content-visibility: hidden.

La propriété anchor-name est prise en charge sur tous les éléments qui génèrent une boîte principale. Cela signifie que les pseudo-éléments, y compris le contenu généré avec ::before et ::after, ainsi que des éléments d'interface comme le curseur du champ range (::-webkit-slider-thumb), peuvent être des éléments d'ancre. Les pseudo-éléments sont implicitement ancrés au même élément que l'élément d'origine du pseudo-élément, sauf indication contraire.

Pour plus d'informations sur les fonctionnalités et l'utilisation des ancres, consultez le module Positionnement par ancre CSS et le guide Utiliser le positionnement par ancre CSS.

Définition formelle

Valeur initiale	`none`
Applicabilité	All elements that generate a principal box
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

anchor-name = 
  none             |
  <dashed-ident>#

Exemples

Utilisation simple

Cet exemple associe un élément positionné à une ancre, en positionnant l'élément à droite de l'ancre.

HTML

Nous définissons deux éléments HTML <div> : un élément d'ancre avec la classe anchor et un élément positionné avec la classe infobox.

Nous ajoutons également du texte de remplissage autour des deux <div> pour que le <body> soit plus haut et nécessite un défilement.

html

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>Ceci est une boîte d'information.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

Nous commençons par déclarer la <div> anchor comme élément d'ancre en lui attribuant un nom d'ancre via la propriété anchor-name :

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

css

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

Nous associons la seconde <div> à l'élément d'ancre en définissant son nom d'ancre comme valeur de la propriété position-anchor de l'élément positionné. Nous définissons ensuite :

la propriété position à fixed, ce qui convertit l'élément en élément positionné par ancre pour qu'il puisse être positionné par rapport à l'ancre sur la page ;
les propriétés left et top à des fonctions anchor() avec les valeurs right et top respectivement. Cela place le bord gauche de la boîte d'information contre le bord droit de son ancre, et son bord supérieur par rapport au bord supérieur de l'ancre ;
margin-left à 10px, pour créer un espace entre l'élément positionné et son ancre.

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

css

.infobox {
  position-anchor: --my-anchor;
  position: fixed;
  left: anchor(right);
  top: anchor(top);
  margin-left: 10px;
}

Résultat

Faites défiler la page pour voir comment la boîte d'information est positionnée par rapport à l'ancre. Lorsque l'ancre défile vers le haut, l'élément positionné se déplace avec elle.

Plusieurs éléments positionnés

Cet exemple montre comment associer plusieurs éléments positionnés à une seule ancre.

HTML

Le code HTML est identique à l'exemple précédent, sauf qu'ici nous avons plusieurs éléments <div> positionnés avec des id différents pour les identifier.

html

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<div class="anchor">⚓︎</div>

<div class="infobox" id="infobox1">
  <p>Ceci est une boîte d'information.</p>
</div>

<div class="infobox" id="infobox2">
  <p>Ceci est une autre boîte d'information.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

Nous déclarons la <div> anchor comme un élément d'ancre en utilisant la propriété anchor-name, en lui attribuant un nom d'ancre comme précédemment.

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

css

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

Chacun des deux éléments positionnés est associé à l'élément d'ancre en définissant son nom d'ancre comme valeur de la propriété position-anchor de l'élément positionné. Les deux éléments reçoivent également la position fixed, ce qui en fait des éléments positionnés par ancre. Les éléments positionnés sont ensuite placés à différents endroits autour de l'ancre à l'aide d'une combinaison de propriétés d'encart comme ci-dessus et des propriétés align-self / justify-self avec la valeur anchor-center, alignant la boîte d'information au centre de l'ancre dans les directions en ligne et en bloc respectivement.

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

css

.infobox {
  position-anchor: --my-anchor;
  position: fixed;
}

#infobox1 {
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

#infobox2 {
  bottom: anchor(top);
  justify-self: anchor-center;
  margin-bottom: 15px;
}

Résultat

Faites défiler la page pour voir comment les deux boîtes d'information sont rattachées à l'ancre.

Plusieurs noms d'ancre

Cet exemple montre qu'un élément d'ancre peut avoir plusieurs noms d'ancre.

HTML

Le code HTML est identique à l'exemple précédent.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<div class="anchor">⚓︎</div>

<div class="infobox" id="infobox1">
  <p>Ceci est une boîte d'information.</p>
</div>

<div class="infobox" id="infobox2">
  <p>Ceci est une autre boîte d'information.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

Le CSS est identique à l'exemple précédent, à ceci près que nous incluons deux noms séparés par des virgules dans la valeur de la propriété anchor-name de la cible et que chaque élément positionné a une valeur différente pour position-anchor.

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

css

.anchor {
  anchor-name: --anchor1, --anchor2;
}

.infobox {
  position: fixed;
}

#infobox1 {
  position-anchor: --anchor1;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

#infobox2 {
  position-anchor: --anchor2;
  bottom: anchor(top);
  justify-self: anchor-center;
  margin-bottom: 15px;
}

Résultat

Faites défiler la page pour voir comment les deux boîtes d'information sont rattachées à l'ancre.

Spécifications

Specification
CSS Anchor Positioning Module Level 1 # name

Compatibilité des navigateurs

Voir aussi

La propriété position-anchor
La propriété anchor-scope
L'attribut HTML anchor
Le module de position par ancre CSS
Le guide d'utilisation de positionnement d'ancre CSS

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 28 janv. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content