Position-area - CSS Property

Syntax diagram of position-area.

These values are the most common, but position-area accepts many others:

• Values related to the XY axes: x-start, x-end, y-start, and y-end.
  These can also be shortened to start and end. In this case, the order of writing these values matters: vertical direction first, then horizontal direction.
• Values starting with span (examples: span-y-start or span-left-top) that allow you to position the element spanning two cells.
• Values that are sensitive to the writing mode depending on the language used for the anchor. Their name starts with block or inline: inline-start, block-end, etc.
• Values that are sensitive to the writing mode depending on the language of the text set. Their names start with self: self-inline-start, self-block-start, etc.

Description of the position-area property.

The property position-area is involved in the field of anchor positioning: positioning one element relative to another, which is called the anchor. Specifically, it indicates in which cell(s) the element should be positioned. The cells are defined as follows, relative to the anchor:

position-area handles both horizontal and vertical positioning. In this sense, it's a simpler solution than using the anchor() function, but it's also a less precise one.

See also the page on the anchor-name property for a list of properties involved in anchor positioning, as well as a tutorial on the topic.

Language support.

For automatic adaptation to the language used, choose the values whose name starts with block or inline. You can also adapt to the language of the placed text by using the properties whose name starts with self.

Values for position-area.

• position-area: none;

  The element is not positioned relative to an anchor. The positioning is done according to the position property, either relative to the page (absolute) or relative to the viewport (fixed).

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

  With one of these four values, the element positions itself on the cell above, to the right, below, or to the left of the anchor.

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

  By specifying two values, you can position the element in one of the cells. The first value sets the vertical position. The second sets the horizontal position, but the order of the values doesn't matter since the names aren't ambiguous. Note that the value center center overlays the positioned content in the middle of the anchor.
  If only one value is given, the second is set to 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;

  Values can be expressed along the X and Y axes, and they don't depend on the language. These are values whose names start with x or y.
  Values like x-center and y-center don't exist; we just use the usual center value.
  Again, the order of the values doesn't matter because the names aren't ambiguous.

  ⚓
  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;

  The values can also be start or end. In this case, the first value relates to positioning in the block direction, the second in the inline direction, and the order matters because the terms start and end alone don't let you tell if we're talking about vertical or horizontal alignment.

  ⚓

  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;

  These two values are sensitive to the writing mode of the text placed (the one that receives the property position-area).

  ---

  Writing mode: Latin languages Arabic languages CJK languages Mongolian language Hebrew languages

  ---

  ⚓

  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;

  The word span-, which prefixes any term you've seen before, except center, means the positioned element should span two cells.

  span-all indicates that the text spans the three cells on the indicated side. For example, span-all top positions the element over the three cells above the anchor.

  span can be combined with physical values, XY values, or logical values.

  ⚓
  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;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the position-area property.

The animation of position-area is subtle: a sudden jump from one value to another, which is normal since the property doesn't accept numerical values.

Access the position-area property via a program

With Javascript, change the value of position-area.

In JavaScript, here's how to change the value of position-area. You can see that JavaScript offers a syntax using the typical CSS notation, in kebab-case (a dash to separate words), and another syntax using the camel-case notation (a capital letter to separate words).

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

With Javascript, read the value of position-area.

The property must have been applied directly to the element itself via its HTML style attribute, and not through a CSS selector.

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

With Javascript, read the computed value of position-area.

The computed value is the one that results from taking into account any inherited values. If not, it’s the initial value of the property, but in any case, the computed value is defined.

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

With JQuery, read or change the value of position-area.

JQuery is a Javascript library that often allows shorter syntax than Javascript itself.


// Read the value:
$('#id').prop('position-area');
// Write the value:
$('#id').prop('position-area', 'left top');
$('#id').prop('{position-area': 'left top'});


With JQuery, read the computed value of position-area.

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

Other code examples.

You can find more examples of Javascript and JQuery code on the page Javascript and CSS.

Test it yourself.

The buttons below apply the entered value to the position-area property and then show either the value as it was applied, or the computed value. This second option lets you see how the value of position-area is stored (serialized). In the case of position-area, there aren’t big differences unless you enter an incorrect value; in that case, the assigned value is empty, while the computed value is the initial value of the property (none).

Simulator.

Not all of the values accepted by position-area are available in the simulator; only the main ones are listed.

Browsers compatibility with position-area.

The position-area property is well recognized by all current browsers. All values are handled correctly.

Notes:

(1) Samsung Internet does not support the position-anchor property with the value normal. It also doesn't fully support the anchor-visibility property.

(2) Android browser does not support the position-anchor property with the value normal.
It also doesn't fully support the anchor-visibility property.

(3) Doesn't fully support the anchor-visibility property.

(4) Firefox does not allow animation of the anchor() and anchor-size() functions.
It does not fully support the anchor-visibility property.

(5) Opera does not support the position-anchor property with the value normal.
It also doesn't fully support the anchor-visibility property.

1

Anchor
positioning

2

position-area
property

Estimated overall support.

86%

69%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

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

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the position-area property.

• CSS Anchor Positioning - Level 1

  Absolute positioning relative to the page or screen can prove to be limited when you want to position an element relative to another.
  This specification describes the properties necessary to achieve this, as well as the functions anchor() and anchor-size() that allow you to set the position and dimensions of an element based on another.
  It also describes how to test several positioning possibilities to adapt to the context, particularly to the state of the page scrolling.

  Regarding position-area First description of the property position-area that positions an element relative to its anchor.
  

  June 29, 2023

  Working Draft.

  

  

  

Voir aussi, à propos des positionnement par ancrage.

Anchor positioning is a fairly complex specification; all the properties, functions, and guidelines related to the subject are grouped in CSS Anchor Positioning, and listed below.

Properties:

Functions:

At-rules: