Position-area - Propriété CSS

Schéma de la syntaxe de position-area.

Ces valeurs sont les plus courantes mais position-area en accepte de nombreuses autres :

• Des valeurs relatives aux axes XY : x-start, x-end, y-start et y-end.
  Qui peuvent eux-mêmes être abrégés par start et end. Dans ce cas l'ordre d'écriture de ces valeurs est important : d'abord la direction verticale, ensuite la direction horizontale.
• Les valeurs commençant par span (exemples : span-y-start ou span-left-top) qui permettent de positionner l'élément à cheval sur deux cellules.
• Les valeurs sensibles au mode d'écriture en fonction de la langue utilisée pour l'ancre. Leur nom commence par block ou inline : inline-start, block-end, etc.
• Les valeurs sensibles au mode d'écriture en fonction de la langue du texte positionné. Leur nom commence par self : self-inline-start, self-block-start, etc.

Description de la propriété position-area.

La propriété position-area intervient dans le domaine du 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 :

position-area s'occupe à la fois du positionnement horizontal et vertical. En ce sens c'est une solution plus simple que de passer par la fonction anchor() mais c'est aussi une solution moins précise.

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

Prise en charge de la langue.

Pour une adaptation automatique à la langue utilisée, choisissez les valeurs dont le nom commence par block ou inline. Vous pouvez aussi vous adapter à la langue du texte positionné en utilisant les propriétés dont le nom commencent par self.

Valeurs pour position-area.

• position-area: none;

  L'élément n'est pas positionné par rapport à une ancre. Le positionnement se fait 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 cellule située au dessus, à droite, en dessous ou à gauche de l'ancre.

  ⚓
  top
  right
  bottom
  left
  center
• position-area: top left; position-area: top right; position-area: bottom left; position-area: bottom right;

  En indiquant deux valeurs on peut positionner l'élément dans une des cellules. La premier valeur définit la position dans le sens vertical. La deuxième dans le sens horizontal mais l'ordre des valeurs n'a pas d'importance car les noms ne sont pas ambigus. Notez que la valeur center center superpose le contenu positionné au milieu de l'ancre.
  Si une seule valeur est précisé, la deuxième est fixée à center.

  ⚓
  top left
  top center
  top right
  center right
  center left
  center center
  bottom right
  bottom center
  bottom left
• position-area: y-start x-start; position-area: y-start x-end; position-area: y-end x-start; position-area: y-end x-end;

  Les valeurs peuvent être exprimées suivant les axes X et Y, insensibles à la langue. Ce sont les valeurs dont le nom commence par x ou y.
  Les valeurs x-center et y-center n'existent pas, on utilise la valeur center habituelle.
  Là encore l'ordre des valeurs n'a pas d'importance car les noms ne sont pas ambigus.

  ⚓
  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
  center center
• position-area: start start; position-area: start end; position-area: end start; position-area: end end;

  Les valeurs peuvent également être start ou end. Dans ce cas la première valeur concerne le positionnement dans le sens de blocs, la deuxième dans le sens des lignes, et l'ordre a de l'importance car les termes start et end seuls ne permettent pas de décider si on parle d'un alignement vertical ou horizontal.

  ⚓

  start start

  start center

  start end

  center start

  center center

  center end

  end start

  end end

  end center
• position-area: self-block-start self-inline-start; position-area: self-block-start self-inline-end; position-area: self-block-end self-inline-start; position-area: self-block-end self-inline-end;

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

  ---

  Mode d'écriture : Langues latines Langues arabes Langues CJK Langue mongole Langues hébraïques

  ---

  ⚓

  self-block-start
self-inline-start

  self-block-start
center

  self-block-start
self-inline-end

  center
self-inline-end

  center
self-inline-end

  self-block-end
self-inline-start

  self-block-end
center

  self-block-end
self-inline-end
• position-area: top span-left;

  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-all top positionne l'élément sur les trois cellules au dessus de l'ancre.

  span peut être combiné avec les valeurs physiques, les valeurs XY, ou avec les valeur logiques.

  ⚓
  top
span-left
  top
span-right
  bottom
span-left
  bottom
span-right
  span-top
left
  


span-all
right


 
• position-area: initial; (none) position-area: inherit; position-area: revert; position-area: revert-layer; position-area: revert-rule; position-area: unset;

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

Exemple d'animation de position-area.

L'animation de position-area est discrète : passage brutal d'une valeur à l'autre, ce qui est normal puisque la propriété n'accepte pas de valeur numérique.

Accéder à la propriété position-area par programme.

Avec Javascript, modifier la valeur de position-area.

En Javascript, voici comment modifier la valeur de position-area. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['position-area'] = 'left top'; // ou let el = document.getElementById('id'); el.style.positionArea = 'left top';

Avec Javascript, lire la valeur de position-area.

La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style du HTML, et pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['position-area']; // ou let el = document.getElementById('id'); let value = el.style.positionArea;

Avec Javascript, lire la valeur calculée de position-area.

La valeur calculée est celle qui résulte de la prise en compte éventuelle des valeurs héritées. A défaut c'est la valeur initiale de la propriété, mais dans tous les cas, la valeur calculée est définie.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('position-area');

Avec JQuery, lire ou modifier la valeur de position-area.

JQuery est une libraire Javascript. qui autorise souvent des syntaxes plus courtes que Javascript lui même.


// Lire la valeur :
$('#id').prop('position-area');
// Écrire la valeur :
$('#id').prop('position-area', 'left top');
$('#id').prop('{position-area': 'left top'});


Avec JQuery, lire la valeur calculée de position-area.

let value = $('#id').css('position-area');

Autres exemples de code.

Vous trouverez d'autres exemples de code Javascript et JQuery sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété position-area et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de position-area. Dans le cas de position-area il n'y a pas de grosses différences sauf si vous saisissez une valeur incorrecte ; dans ce cas la valeur affectée est vide, tandis que la valeur calculée est la valeur initiale de la propriété (none).

Exemple interactif avec la propriété position-area.

Toutes les valeurs acceptées par position-area ne sont pas présentes dans le simulateur; seules les principales sont notées.

Compatibilité des navigateurs avec position-area.

La propriété position-area est bien reconnue par tous les navigateurs actuels. Toutes les valeurs sont correctement traitées.

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.

1

Positionnement
par ancrage

2

Propriété
position-area

Estimation de la prise en charge globale.

86%

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

1

Androïd Brower

2

Chrome

3

Chrome pour Androïd

3

Edge

3

Firefox

4

Firefox pour Androïd

4

KaiOS Browser

Opéra

5

Safari

Safari sur IOS

Opéra mini

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

Caniuse

Caniuse

Histoire de la propriété position-area.

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

Le positionnement par ancrage est une spécification assez complexe; Toutes les propriétés, fonctions et directives relatives au sujet sont regroupées dans module CSS - Positionnement par ancrages, et listée ci-dessous.

Propriétés :

Fonctions :

Directives :