Position-anchor - Propriété CSS

Schéma de la syntaxe de position-anchor.

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é 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 qui est appelé l'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 et pour un tutoriel sur le positionnement par ancrage.

Valeurs pour position-anchor.

• position-anchor: none;

  Aucun ancrage n'est défini par cet élément. L'élément n'est accroché à aucune ancre.

  --syntax1
  ⚓

  position-anchor:none;
• position-anchor: normal;

  Si la propriété position-area est nulle, la valeur normal est équivalente à none, sinon elle est équivalente à la valeur auto.
  Pour le moment les navigateurs ne font pas de différences avec la valeur none.

  --syntax2
  ⚓

  position-anchor:normal;
• position-anchor: auto;

  C'est la valeur par défaut théorique, mais beaucoup de navigateurs adoptent none comme 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. D'autres éléments possèdent l'attribut non standard anchor.
  Pour le moment les navigateurs ne font pas de différences avec la valeur none.

  --syntax3
  ⚓

  position-anchor:auto;
• position-anchor: --id;

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

  --syntax4
  ⚓

  position-anchor:--syntax4;
• position-anchor: match-parent;

  L'élément suit les mêmes règles de positionnement que son parent.

  --syntax5
  ⚓

  Texte du parent

  position-anchor:match-parent;
• position-anchor: initial; (normal) position-anchor: inherit; position-anchor: revert; position-anchor: revert-layer; position-anchor: revert-rule; position-anchor: unset;

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

Exemple d'animation de position-anchor.

L'animation de la propriété position-anchor est possible en mode discrete (passage brutal d'une valeur à l'autre). Cependant les navigateurs basés sur -webkit- ne semblent pas réaliser l'animation.

Compatibilité des navigateurs avec position-anchor.

Les navigateurs reconnaissent bien la propriété position-anchor mais beaucoup d'entre eux utilisent none comme valeur initiale.

Remarques :

(1) Samsung Internet ne supporte pas la propriété position-anchor avec la valeur normal.
Et ne supporte pas complètement la propriété anchor-visibility.

(2) Android Browser ne supporte pas la propriété position-anchor avec la valeur normal.
Il ne supporte pas non plus complètement la propriété anchor-visibility.

(3) Ne supporte pas totalement la propriété anchor-visibility.

(4) Firefox ne permet pas l'animation des fonctions anchor() et anchor-size().
Il ne supporte pas non plus totalement la propriété anchor-visibility.

(5) Opéra ne supporte pas la propriété position-anchor avec la valeur normal.
Il ne supporte pas non plus complètement la propriété anchor-visibility.

(6) La valeur initiale est none au lieu de normal.

1

Positionnement
par ancrage

2

Propriété
position-anchor

Estimation de la prise en charge globale.

86%

71%

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

6

Androïd Brower

2

6

Chrome

3

6

Chrome pour Androïd

3

6

Edge

3

6

Firefox

4

Firefox pour Androïd

4

6

KaiOS Browser

Opéra

5

6

Safari

6

Safari sur IOS

6

Opéra mini

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

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.
  

  29 Juin 2023

  Document de travail.

  

  

  

Voir aussi, à propos des positionnement par ancrage.

Le positionnement par ancrage consiste à positionner un élément par rapport à un autre. La spécification module CSS - Positionnement par ancrages regroupe toutes les propriétés et fonctions relatives à cette fonctionnalité.

Propriétés :

Fonctions :

Directives :