Position-anchor - CSS Property

Syntax diagram of position-anchor.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• --id is an identifier defined by the property anchor-name.

Description of the position-anchor property.

This property is used in anchor positioning, which is an evolution of positioning with absolute or fixed (see the position property for that). It involves positioning an element relative to another one, which is called the anchor.

The anchor received an identifier (which starts with a double dash) through the anchor-name property. This is the identifier that should be given to the position-anchor property. Also, check out the anchor-name property page for a summary of the properties involved in anchor positioning and for a tutorial on anchor positioning.

Values for position-anchor.

• position-anchor: none;

  No anchor is set by this element. The element isn't attached to any anchor.

  --syntax1
  ⚓

  position-anchor:none;
• position-anchor: normal;

  If the property position-area is null, the value normal is equivalent to none; otherwise, it is equivalent to the value auto.
  For now, browsers don't make any distinction with the value none.

  --syntax2
  ⚓

  position-anchor:normal;
• position-anchor: auto;

  This is the theoretical default value, but many browsers use none as the default. Some elements have automatic and predefined positioning. This is the case, for example, with bullets in a list, or with ::before and ::after elements. Other elements have the non-standard anchor attribute.
  For now, browsers don't make any distinction with the none value.

  --syntax3
  ⚓

  position-anchor:auto;
• position-anchor: --id;

  The element will be positioned relative to the anchor with the ID --id.

  --syntax4
  ⚓

  position-anchor:--syntax4;
• position-anchor: match-parent;

  The element follows the same positioning rules as its parent.

  --syntax5
  ⚓

  Texte du parent

  position-anchor:match-parent;
• position-anchor: initial; (normal) position-anchor: inherit; position-anchor: revert; position-anchor: revert-layer; position-anchor: revert-rule; position-anchor: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the position-anchor property.

Animating the position-anchor property is possible in discrete mode (sudden jump from one value to another). However, browsers based on -webkit- don’t seem to perform the animation.

Browsers compatibility with position-anchor.

Browsers do recognize the position-anchor property, but many of them use none as the default value.

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.

(6) The initial value is none instead of normal.

1

Anchor
positioning

2

position-anchor
property

Estimated overall support.

86%

71%

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

6

Androïd Brower

2

6

Chrome

3

6

Chrome pour Androïd

3

6

Edge

3

6

Firefox

4

Firefox pour Androïd

4

6

KaiOS Browser

Opéra

5

6

Safari

6

Safari sur IOS

6

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the position-anchor 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-anchor First presentation of the property position-anchor which indicates on which anchor the element should position itself.
  

  June 29, 2023

  Working Draft.

  

  

  

See also, about anchor positioning.

Anchor positioning involves placing one element in relation to another. The specification CSS Anchor Positioning gathers all the properties and functions related to this feature.

Properties:

Functions:

At-rules: