Position-area - Propriété CSS

Description de la propriété position-area.

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

Voir aussi les propriétés anchor-name et position-anchor.

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.

  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.

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

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

  Ancre
  

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

  ---

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

  ---

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

  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.

Remarques :

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

1

Positionnement
par ancrage

2

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

1

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

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

  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 :

Directives :