Position-anchor - Propriété CSS
Résumé des caractéristiques de la propriété position-anchor
auto
auto
position-anchor
passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de position-anchor
.
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é 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
.
position-anchor
qui définit l'ancre sur laquelle doit se positionner un élément.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.
par ancrage
position-anchor
auto
pour
position-anchor
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

Opéra

Firefox pour Androïd

Chrome

Edge

Safari

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

KaiOS Browser

Opéra mini
Histoire de la propriété position-anchor
.
-
Module CSS - Positionnement par ancrages - Niveau 1
Première présentation de la propriétéposition-anchor
qui indique sur quelle ancre doit se positionner l'élément.29 Juin 2023Document de travail.
Voir aussi, à propos des positionnement par ancrage.
Propriétés :
anchor-name
.position-try-fallbacks
et position-try-order
.