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 (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: none;

  Aucun ancrage n'est défini par cet élément.

• position-anchor: normal;

  Si la propriété position-area est nulle, la valeur normal est équivalente à none, sinon elle est équivalente à la valeur auto.

• 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. D'autres éléments possèdent l'attribut non standard anchor.

• position-anchor: --id;

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

  Plusieurs noms peuvent être définis. Le navigateur choisit celui qui est visible à un moment donné.

• position-anchor: match-parent;

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

• position-anchor: initial; (normal) 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.

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

Remarques :

(1) 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.

71%

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

Safari

1

Safari sur IOS

1

Opéra

1

Firefox pour Androïd

1

Edge

1

Chrome

1

Firefox

Androïd Brower

1

Chrome pour Androïd

1

KaiOS Browser

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.

Propriétés :

Fonctions :

Directives :