`Position-area` - Propriété CSS

position-area

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

Description rapide

Définit comment se positionne un élément par rapport à l'ancre (au dessus, à côté, etc.).

Statut

Problèmes de compatibilité ⚠

Utilisable sur

HTML

Valeurs prédéfinies

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

TBD

Module W3C

Module CSS - Positionnement par ancrages

Références (W3C)

CSS Anchor Positioning - Level 1

Statut du document: WD (document de travail)

Description de la propriété `position-area`.

⚠

Cette propriété est encore peu implémentée par les navigateurs. Cette page sera complétée par la suite.

La propriété position-area intervient dans le domaine des positionnement par ancrage : positionner un élément par rapport à un autre, qui prend le nom d'ancre. Plus précisément elle indique dans quelle(s) cellule(s) doit se positionner l'élément, les cellules étant définies comme suit, par rapport à l'ancre.

`left top`	`center top`	`right top`
`left center`	Ancre ⚓ `center center`	`right center`
`left bottom`	`center bottom`	`right bottom`

Voir aussi la page sur la propriété anchor-name pour une liste des propriétés qui interviennent dans le positionnement par ancrage.

Valeurs pour `position-area`.

Les exemples donnés ne fonctionnent ni sur Firefox ni sur Safari .

position-area: none;

L'élément n'est pas positionné par rapport à une ancre. Le positionnement se faire suivant la propriété position, par rapport à la page (absolute) ou par rapport à la fenêtre d'affichage (fixed).
position-area: top; position-area: right; position-area: bottom; position-area: left;

Avec l'une de ces quatre valeurs, l'élément se positionne sur la ligne située au dessus, à droite, en dessous ou à gauche de l'ancre.

⚓

top

right

bottom

left
position-area: val1 val2;

En indiquant deux valeurs on peut positionner l'élément dans une des cellules. La premier valeur définit la position dans le sens horizontal. La deuxième dans le sens vertical. Notez que la valeur center center superpose l'infobulle au milieu de l'ancre.
Si une seule valeur est précisé, la deuxième est fixée à center.

⚓

left top

center top

right top

right center

right bottom

center bottom

left bottom

left center

center center
position-area: val1 val2;

Les valeurs peuvent être exprimées avec x-start, x-end, y-start et y-end, insensibles au mode d'écriture en fonction de la langue.

⚓

y-start x-start

y-start center

y-start x-end

center x-start

center x-end

y-end x-start

y-end center

y-end x-end
position-area: val1 val2;

val1 et val2 peuvent être également les valeurs logiques : start ou end. La première valeur concerne le positionnement dans le sens de blocs, la deuxième dans le sens des lignes.

⚓

start start

start center

start end

center end

end start

center start

end end

end center
position-area: val1 val2;

Ces deux valeurs sont sensibles au mode d'écriture du texte positionné (celui qui reçoit la propriété position-area).

Mode d'écriture :

⚓

self-start self-start

self-start center

self-start self-end

center self-end

center self-end

self-end self-start

self-end center

self-end self-end
position-area: span-val1 span-val2;

Le mot span-, qui préfixe n'importe quel terme déjà vu, sauf center, indique que l'élément positionné doit chevaucher deux cellules.

span-all indique que le texte chevauche les trois cellules du coté indiqué. Par exemple span-top positionne l'élément sur les trois cellules au dessus de l'ancre.

⚓

span-left top

span-right top

span-left bottom

span-right bottom
position-area: initial; (none) position-area: inherit; position-area: revert; position-area: revertLayer; position-area: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Compatibilité des navigateurs avec `position-area`.

Colonne 1

Prise en charge générale du positionnement par ancrage.

Colonne 2

Support de la propriété position-area qui indique où doit se positionner l'élément par rapport à l'ancre.

Remarques :

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

(2) Utilise la dénomination non standard inset-area.

Positionnement
par ancrage

Propriété
position-area

Estimation de la prise en charge globale.

71%

69%

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

Chrome

Edge

Safari

Opéra

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

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

Caniuse

Histoire de la propriété `position-area`.

Module CSS - Positionnement par ancrages - Niveau 1

Première description de la propriété position-area qui positionne un élément par rapport à son ancre.

29 Juin 2023
Document de travail.

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