Anchor() - Function CSS

Description of the anchor() function.

⚠

The function anchor() is not recognized by all browsers. Only Opera   and WebKit-based browsers fully support this function.

To achieve positioning through anchoring, two elements are necessary:

• The anchor: an element that has been given an identifier with anchor-name.
• A positioned element: an element that is associated with the anchor using the position-anchor property.

The function anchor() specifies the positioning of the positioned element: to the left, to the right, etc. It is used with the top, bottom, left, and right properties or their writing-mode-aware equivalents. From this perspective, it replaces the position-area property.

Here is an example of positioning by anchoring. In the code sample, we only included the properties essential for positioning.

If you want to learn more about anchoring positioning, we invite you to visit the page on anchor-name , which provides a list of useful terms.

The anchor() value can be used with the following properties:

• bottom : Defines the space between the bottom of the element (if positioned) and the bottom of its parent.
• inset : Sets the position of the element when it is positioned other than static. Short hand for top, right, bottom and left.
• inset-block : Defines the position of a positioned element in the block direction. Shorthand for inset-block-start and inset-block-end.
• inset-block-end : For a positioned element, sets the location of the end side of the block.
• inset-block-start : For a positioned element, sets the location of the edge on the start side of the block.
• inset-inline : Defines the position of a positioned element in the inline direction. Shorthand for inset-inline-start and inset-inline-end.
• inset-inline-end : On a positioned element, sets the location of the edge at the end of the line.
• inset-inline-start : On a positioned element, sets the location of the edge at the starting of the line.
• left : For a positioned element, defines the space between the left edge of the element and the left edge of the reference element.
• right : For a positioned element, defines the space between the right edge of the element and the right edge of the reference element.
• top : For a positioned element, defines the space between the top of the element and the top of the reference element (positioned parent or viewport).

Syntaxes of the anchor() function.

• top: anchor(top);

  top sets the top position of the element, bottom sets the bottom, left the left side, and finally, right the right side. To position an element, both coordinates must be specified using the top or bottom properties for the vertical axis and left or right for the horizontal axis.
  The values provided to these properties can be a anchor() function. The function parameter indicates which side of the anchor should be used as a reference. In the example, the horizontal coordinate is left:anchor(right):.

  We give below an example with top and bottom, but the situation would be completely comparable with left and right.

  ⚓

  top:anchor(top); left:anchor(right);

  top:anchor(bottom); left:anchor(right);

  bottom:anchor(top); left:anchor(right);

  bottom:anchor(bottom); left:anchor(right);

  It doesn't make sense to mix the vertical axis and the horizontal axis. For example, writing top:anchor(left), although the syntax allows such expressions.

• top: anchor(center);

  The center value adapts to the required axis: with top and bottom it will be the vertical axis, with left and right it will be the horizontal axis.

  ⚓

  top:anchor(center); left:anchor(right);

  bottom:anchor(center); left:anchor(right);

  left:anchor(center); bottom:anchor(top);

  right:anchor(center);
top:anchor(bottom);
• top: anchor(inside); top: anchor(outside);

  With the value inside, the positioned element starts inside the anchor. With outside, it's the opposite; the positioned element starts outside.

  ⚓

  top:anchor(inside);
left:anchor(inside);

  top:anchor(outside);
left:anchor(outside);
• inset-inline-start: anchor(start); inset-inline-start: anchor(end); inset-inline-start: anchor(self-start); inset-inline-start: anchor(self-end);

  These values are sensitive to the writing mode depending on the language. They are used with logical properties, which are themselves language-sensitive. We must consider the language...

  • Of the anchor for start and end.
  • Of the positioned element for self-start and self-end.

   

  ---

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

  ---

  ⚓

  inset-block-start:anchor(start);
inset-inline-start:anchor(start);

  -

  inset-block-start:anchor(end);
inset-inline-start:anchor(end);
• top: anchor(20%);

  It is also possible to specify a percentage. This is calculated relative to the dimensions of the anchor in the considered direction (horizontal for left and right, vertical for top and bottom).

  ⚓

  top:anchor(10%); left:anchor(50%);

  bottom:anchor(90%); left:anchor(90%);
• top: anchor(--anchor top, 20%);

  The syntax allows specifying the identifier of an anchor that is not necessarily the anchor used by position-anchor. In any case, position-anchor must always be present. It is therefore possible to align a component with a different anchor than the one that was defined.

  In the example below, the element is always positioned horizontally according to the anchor image, but its vertical position is defined relative to the target image.

  ⚓

  🎯

  top:anchor(--syntax2 top);
left:anchor(right%);

  In the case where the specified identifier does not exist, the percentage is used relative to the first positioned element found by traversing up the tree. In the example below, the identifier --absent has not been defined. The percentage is then applied to the "description1" frame.

  ⚓

  top:anchor(--absent top, 10%);
left:anchor(right);
  id="description1"

Simulator.

The simulator sets the vertical position top, with the horizontal position fixed at right:anchor(left);.

Browsers compatibility with anchor() function.

Firefox   does not yet handle this feature in a standard way: it needs to be enabled with the flag layout.css.anchor-positioning.enabled. See how to access flags on Firefox.

Notes:

(1) Disabled by default. Can be enabled by setting the layout.css.anchor-positioning.enabled flag to true.

1

Anchor
positioning

2

anchor()
function

Estimated overall support.

71%

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

Chrome

Edge

Safari

Opéra

Firefox

1

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the anchor() function.

• 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 anchor(). Introduction to this specification of anchor positioning, and of the function anchor().
  

  June 29, 2023

  Working Draft.

  

  

  

See also, regarding anchor-based positioning.

The W3C specification that defines anchor positioning is CSS Anchor Positioning. It mainly describes properties, but there are also a few functions.

Properties:

⚠

anchor-name

Define an identifier for the element that can then become an anchor.

⚠

anchor-scope

Defines the scope of the property anchor-name.

⚠

position-anchor

Defined in relation to which anchor the element should be positioned.

⚠

position-area

Defines how an element is positioned relative to the anchor (above, beside, etc.).

position-try

Shorthand property that summarizes the values for position-try-fallbacks and position-try-order.

⚠

position-try-fallbacks

Specifies a list of positions for the positioned element (anchoring positioning) so that the browser can choose the one that is most suitable at any given moment, taking into account scrolls or zooms.

⚠

position-try-order

Defines a different order for the values listed by position-try-fallbacks.

⚠

position-visibility

Defines whether the positioned element is visible or not, in the context of anchoring positioning.

Functions:

At-rules:

⚠

@position-try

Defines a set of rules for each anchor position and gives them a name (anchoring positioning).