@position-try

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La règle @ CSS @position-try permet de définir une option personnalisée de repli de position, utilisée pour définir le positionnement et l'alignement des éléments ancrés. Un ou plusieurs ensembles d'options de repli peuvent être appliqués à l'élément ancré via la propriété position-try-fallbacks ou le raccourci position-try. Lorsque l'élément positionné est déplacé à un endroit où il commence à déborder de son bloc conteneur ou de la zone d'affichage (viewport en anglais), le navigateur sélectionne la première option de repli qui permet de replacer l'élément entièrement à l'écran.

Chaque option de position est nommée avec un <dashed-ident> et contient une liste de descripteurs spécifiant des déclarations qui définissent des informations telles que la position d'insertion, la marge, la taille et l'auto-alignement. Le <dashed-ident> est utilisé pour référencer l'option personnalisée dans la propriété position-try-fallbacks et le raccourci position-try.

Pour des informations détaillées sur les fonctionnalités d'ancrage et l'utilisation des options de repli, consultez la page du module Positionnement d'ancre CSS et le guide Options de repli et masquage conditionnel en cas de débordement.

Syntaxe

css

@position-try --try-option-name {
  descriptor-list
}

Note : --try-option-name est un <dashed-ident> qui définit un nom d'identification pour l'option de position personnalisée, pouvant ensuite être ajoutée à la liste position-try-fallbacks.

Descripteurs

Les descripteurs définissent les valeurs des propriétés qui déterminent le comportement de l'option de position personnalisée, c'est-à-dire l'endroit où l'élément positionné sera placé.

position-anchor : Définit la valeur de la propriété position-anchor qui indique l'élément d'ancrage auquel l'élément positionné est attaché, en spécifiant une valeur <dashed-ident> identique à la propriété anchor-name de l'élément d'ancrage.
position-area : Définit la valeur de la propriété position-area qui indique la position de l'élément positionné par rapport à l'ancre.
Descripteurs des propriétés d'insertion : Spécifient des valeurs de fonction anchor() qui définissent la position des bords de l'élément positionné par rapport aux bords de l'élément d'ancrage. Les descripteurs d'insertion peuvent représenter les propriétés suivantes :
Descripteurs de marge : Spécifient la marge appliquée à l'élément positionné. Les descripteurs de marge peuvent représenter les propriétés suivantes :
Descripteurs de taille : Spécifient des valeurs de fonction anchor-size() qui définissent la taille de l'élément positionné par rapport à la taille de l'ancre. Les descripteurs de taille peuvent représenter les propriétés suivantes :
Descripteurs d'auto-alignement : Spécifient la valeur anchor-center pour aligner l'élément positionné par rapport au centre de l'ancre, dans la direction du bloc ou de l'axe inline. Les propriétés align-self et justify-self peuvent prendre la valeur anchor-center.

Note : Lorsqu'une option de position personnalisée est appliquée à un élément, les valeurs définies dans le descripteur de la règle @position-try prennent le dessus sur celles définies sur l'élément via les propriétés CSS standard.

Syntaxe formelle

@position-try = 
  @position-try <dashed-ident> { <declaration-list> }

Exemples

Utilisation d'une option de position personnalisée

Dans cet exemple, on définit un élément d'ancrage et un élément positionné, puis on crée quatre options de repli nommées. Ces options sont appliquées à l'élément positionné pour garantir que son contenu reste toujours visible, peu importe la position de l'ancre dans la zone d'affichage.

HTML

On inclut deux éléments <div> qui deviendront une ancre et un élément positionné :

html

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

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

CSS

On commence par styliser l'élément <body> pour qu'il soit très grand, afin de pouvoir faire défiler l'ancre et l'élément positionné dans la zone d'affichage, horizontalement et verticalement :

css

body {
  width: 1500px;
  height: 500px;
}

.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;
}

L'ancre reçoit un anchor-name et une valeur position de absolute. On la positionne ensuite près du centre du rendu initial du <body> avec les valeurs top et left :

css

.anchor {
  anchor-name: --my-anchor;
  position: absolute;
  top: 100px;
  left: 350px;
}

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

Ensuite, on utilise la règle @position-try pour définir quatre options de position personnalisées, avec des noms <dashed-ident> descriptifs. Chacune place l'élément positionné à un endroit précis autour de l'ancre et lui donne une marge de 10px adaptée. Le positionnement est géré de différentes manières pour illustrer les techniques disponibles :

La première et la dernière option utilisent position-area.
La deuxième option utilise top avec une valeur anchor() et justify-self: anchor-center pour centrer l'élément positionné sur l'ancre dans la direction inline.
La troisième option utilise left avec une valeur anchor(), enveloppée dans une fonction calc() qui ajoute 10px d'espacement (plutôt que de créer l'espacement avec margin comme les autres options). Elle utilise ensuite align-self: anchor-center pour centrer l'élément positionné sur l'ancre dans la direction du bloc.

Enfin, les options gauche et droite reçoivent une valeur de width plus étroite :

css

@position-try --custom-left {
  position-area: left;
  width: 100px;
  margin-right: 10px;
}

@position-try --custom-bottom {
  top: anchor(bottom);
  justify-self: anchor-center;
  margin-top: 10px;
  position-area: none;
}

@position-try --custom-right {
  left: calc(anchor(right) + 10px);
  align-self: anchor-center;
  width: 100px;
  position-area: none;
}

@position-try --custom-bottom-right {
  position-area: bottom right;
  margin: 10px 0 0 10px;
}

La boîte d'information reçoit un positionnement fixe, une propriété position-anchor qui référence le anchor-name de l'ancre pour les associer, et elle est attachée au bord supérieur de l'ancre via position-area. On lui donne aussi une largeur fixe width et une marge inférieure margin. Les options de position personnalisées sont ensuite référencées dans la propriété position-try-fallbacks pour éviter que l'élément positionné ne déborde ou ne soit masqué lors du défilement, lorsque l'ancre s'approche du bord de la zone d'affichage.

css

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top;
  width: 200px;
  margin-bottom: 10px;
  position-try-fallbacks:
    --custom-left, --custom-bottom, --custom-right, --custom-bottom-right;
}

Résultat

Faites défiler la page et observez le changement de placement de l'élément positionné lorsque l'ancre s'approche des différents bords de la zone d'affichage. Cela est dû à l'application des différentes options de repli.

Explication du fonctionnement des options de position :

Tout d'abord, la position par défaut est définie par position-area: top. Lorsque la boîte d'information ne déborde pas, elle se place au-dessus de l'ancre et les options de repli définies dans la propriété position-try-fallbacks sont ignorées. Notez aussi que la boîte d'information a une largeur et une marge inférieure fixes. Ces valeurs changent selon l'option de repli appliquée.
Si la boîte d'information commence à déborder, le navigateur essaie d'abord la position --custom-left. Cela déplace la boîte à gauche de l'ancre avec position-area: left, ajuste la marge et donne une largeur différente.
Ensuite, le navigateur essaie la position --custom-bottom. Cela place la boîte en dessous de l'ancre avec top et justify-self au lieu de position-area, et définit une marge adaptée. Il n'y a pas de descripteur width, donc la boîte reprend sa largeur par défaut de 200px.
Le navigateur essaie ensuite la position --custom-right. Cela fonctionne comme la position --custom-left, avec la même largeur, mais on utilise left et align-self au lieu de position-area. On enveloppe la valeur de left dans une fonction calc() pour ajouter 10px d'espacement, au lieu d'utiliser margin.
Si aucune des autres options ne permet d'éviter le débordement, le navigateur essaie la position --custom-bottom-right en dernier recours. Cela place la boîte en bas à droite de l'ancre avec position-area: bottom right.

Quand une option de position est appliquée, ses valeurs remplacent celles initialement définies sur l'élément positionné. Par exemple, la largeur initiale de la boîte est 200px, mais lorsque l'option --custom-right est appliquée, sa largeur passe à 100px.

Dans certains cas, il faut désactiver les valeurs initiales à l'intérieur des options personnalisées. Les options --custom-bottom et --custom-right utilisent des propriétés d'insertion et *-self: anchor-center pour placer l'élément, donc on retire la valeur position-area précédemment définie en la mettant à none. Sinon, la valeur initiale position-area: top resterait active et interférerait avec le nouveau positionnement.

Spécifications

Specification
CSS Anchor Positioning # at-ruledef-position-try

Compatibilité des navigateurs

Voir aussi

position-area
position-anchor
position-try-fallbacks
position-try
La fonction anchor()
La fonction anchor-size()
Le module de positionnement d'ancre CSS
Guide pour utiliser le positionnement d'ancre CSS
Guide pour les options de repli et le masquage conditionnel en cas de débordement
CSSPositionTryRule

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨29 sept. 2025⁩ par les contributeurs du MDN.

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