Position-anchor - Propriété CSS

position-anchor

Résumé des caractéristiques de la propriété position-anchor

Description rapide
Définit par rapport à quelle ancre doit se positionner l'élément.
Statut
Problèmes de compatibilité ⚠
S'applique à
Éléments positionnés en fixed ou en absolute.
Utilisable sur
HTML
Valeurs prédéfinies
auto
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété position-anchor passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Positionnement par ancrages
Références (W3C)
Statut du document: WD (document de travail)

Schéma de la syntaxe de position-anchor.

position-anchor - Syntax DiagramSyntax diagram of the position-anchor CSS property. auto auto --id --idposition-anchor:;position-anchor:;
Schéma syntaxique de la propriété position-anchor.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

  • --id est un identifiant définit par la propriété anchor-name.

Description de la propriété position-anchor.

⚠
Cette propriété est expérimentale. Cette page sera complétée par la suite.

Cette propriété intervient dans le positionnement par ancrage, qui est une évolution du positionnement en absolute ou fixed (voir pour ça la propriété position). Il consiste à positionner un élément par rapport à un autre (ancre).

L'ancre a reçu un identifiant (qui commence par un double tiret) par la propriété anchor-name. C'est cet identifiant qui doit être donné à la propriété position-anchor. Voyez aussi la page de la propriété anchor-name pour une synthèse des propriétés qui interviennent dans le positionnement par ancrage.

Valeurs pour position-anchor.

  • position-anchor: auto;

    C'est la valeur par défaut. Certains éléments ont un positionnement automatique et prédéfini. C'est le cas par exemple des puces dans un liste, ou des éléments ::before et ::after.

  • position-anchor: --id;

    L'élément sera positionné par rapport à l'ancre dont l'identifiant est --id.

  • position-anchor: initial; (auto) position-anchor: inherit; position-anchor: revert; position-anchor: revertLayer; position-anchor: unset;

    Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Compatibilité des navigateurs avec position-anchor.

Colonne 1
Prise en charge générale du positionnement par ancrage.
Colonne 2
Support de la propriété position-anchor qui définit l'ancre sur laquelle doit se positionner un élément.
Colonne 3
Support de la valeur auto pour la propriété position-anchor.

Remarques :

(1) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.anchor-positioning.enabled à true.

(2) La valeur auto existe pour la propriété position-anchor mais n'a pas l'effet décrit dans la spécification.

1
Positionnement
par ancrage
2
Propriété
position-anchor
3
Valeur auto
pour position-anchor
Estimation de la prise en charge globale.
71%
71%
0%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

2

Chrome

2

Edge

2

Safari

Opéra

2

Firefox

1

Chrome pour Androïd

2

Safari sur IOS

Androïd Brower

2

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Histoire de la propriété position-anchor.

  • Module CSS - Positionnement par ancrages - Niveau 1

    Le positionnement absolu par rapport à la page ou à l'écran peut s'avérer limité lorsque l'on souhaite positionner un élément par rapport à une autre.
    Cette spécification décrit les propriétés nécessaires pour réaliser cela, ainsi que les fonctions anchor() and anchor-size() qui permettent de fixer la position et les dimensions d'un élément en fonction d'un autre.
    Elle décrit également comment tester plusieurs possibilités de positionnement pour s'adapter au contexte, en particulier à l'état du défilement de la page.

    Concernant position-anchor. Première présentation de la propriété position-anchor qui indique sur quelle ancre doit se positionner l'élément.
    WD
    29 Juin 2023
    Document de travail.
    CR
    PR
    REC

Voir aussi, à propos des positionnement par ancrage.

Propriétés :

⚠
anchor-name
Défiinit un identifiant pour l'élément qui peut dès lors devenir une ancre.
⚠
anchor-scope
Définit la portée de la propriété anchor-name.
Position-anchor
Définit par rapport à quelle ancre doit se positionner l'élément.
⚠
position-area
Définit comment se positionne un élément par rapport à l'ancre (au dessus, à côté, etc.).
position-try
Propriété raccourcie qui résume les valeurs pour position-try-fallbacks et position-try-order.
⚠
position-try-fallbacks
Spécifie une liste de position pour l'élément positionné (positionnement par ancrage) afin que le navigateur puisse choisir celle qui est le plus adapté à un moment donné, compte tenu des défilements ou des zooms.
⚠
position-try-order
Définit un ordre différent pour les valeurs énumérées par position-try-fallbacks.
⚠
position-visibility
Définit si l'élément positionné est visible ou pas, dans le contexte d'un positionnement par ancrage.

Fonctions :

⚠
anchor()
Renvoie la position d'un des bords de l'élément désigné comme ancre (positionnement par ancrage).
⚠
anchor-size()
Renvoie la teille (hauteur ou largeur) de l'élément désigné comme l'ancre (positionnement par ancrage).

Directives :

⚠
@position-try
Définit un ensemble de règles pour chacune des position d'ancrage et leur donne un nom (positionnement par ancrage).