Anchor() - CSS Function

anchor()

Summary of characteristics of the anchor() function

Quick description
Returns the position of one of the edges of the element designated as the anchor (anchor-based positioning).
Status
Standard
W3C Module
CSS Anchor Positioning
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of anchor().

Anchor() - Function CSS - Syntax DiagramSyntax diagram of the anchor CSS property. Used in positioning by anchoring, the function returns the position of one of the edges of the anchor. --id --id top top right right bottom bottom left left center center inside inside outside outside start start end end self-start self-start self-end self-end %1 %1 , %2 , %2anchor()anchor()
Syntax diagram of the anchor() function.
Click on the terms of the diagram for more precision.
Download the diagram.

On the diagram, the terms in bold are the predefined terms in CSS, the others are described below:

  • --id
  • %1 is a percentage, calculated relative to the width or height of the anchor.
  • %2 is a default value, calculated with respect to the considered width or height of the anchor.

Description of the anchor() 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.

⚓
Positioned
element

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, and a tutorial.

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:
    ⚓
    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);.

top :
⚓
Positioned text

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.

Column 1
General support for anchor positioning.
Column 2
Recognition by browsers of the anchor() function for anchoring positioning.

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
anchor()
function
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

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 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().
    WD
    June 29, 2023
    Working Draft.
    CR
    PR
    REC

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
Sets an ID for the item, which can then become an anchor, in the context of anchor positioning.
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:

Anchor()
Returns the position of one of the edges of the element designated as the anchor (anchor-based positioning).
anchor-size()
Returns the size (height or width) of the element designated as the anchor (anchor-based positioning).

At-rules:

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