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é ⚠
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 par la propriété anchor-name. C'est cet identifiant qui doit être donné à la propriété position-anchor. Voyez aussi la propriété position-area pour positionner l'élément par rapport à son ancre.

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) 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

1

Opéra

1

Firefox pour Androïd

Chrome

1

Edge

1

Safari

Firefox

Chrome pour Androïd

1

Safari sur IOS

Androïd Brower

1

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.

Voir aussi, à propos des positionnement par ancrage.

Propriétés :

⚠
anchor-name
Défininit un identifiant pour l'élément qui peut dès lors devenir une infobulle.
⚠
anchor-scope
Définit la portée de la propriété anchor-name.
⚠
position-area
Définit comment se positionne un élément par rapport à l'ancre.
position-try
Propriété raccourcie qui résume les valeurs pour position-try-fallbacks et position-try-order.
⚠
position-try-fallbacks
⚠
position-try-order
⚠
position-visibility
Définit si l'élément positionné est visible ou pas, dans le contexte d'un positionnement par ancrage.

Directives :

⚠
@position-try