Anchor-name - CSS Property

Syntax diagram of anchor-name.

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

• --id is a freely chosen identifier, but it must start with a double dash.

Description of the anchor-name property.

Positioning with fixed or absolute lets you place elements anywhere on the page, without worrying about where other elements are. This is made possible by the position property.

Nevertheless, this option becomes quite limiting when you need to position one element relative to another. This is where anchor-based positioning comes in handy. The element used as a reference for positioning is called the 'anchor.' The one being positioned is called the tooltip. The positioning is dynamic depending on the space around the anchor: if there's no room above, the tooltip can be placed below, and vice versa.

The property anchor-name gives a name (an identifier) to an element, which then becomes an anchor. So it will be possible to position another element using the position-anchor property. Also see the position-area property, which defines where this element should be placed relative to the anchor.

Here are the properties and functions that come into play in anchor-based positioning:

anchor-name :

Sets an ID for the item, which can then become an anchor, in the context of anchor positioning.

position :

La propriété position doit absolument être positionnée sur fixed ou absolute.

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.

anchor-scope :

Defines the scope of the property anchor-name.

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

left, right, top et bottom :

Used with the anchor() functions, these properties position one side of the element relative to the anchor.

width et height :

Used with the anchor-size() function, these properties size an element relative to the anchor.
You can also use the min-width, min-height, max-width, and max-height properties, as well as the language-sensitive writing mode properties.

@position-try :

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

Values for anchor-name.

• anchor-name: none;

  No anchor ID is associated with the element.

• anchor-name: --id;

  The --id identifier is given to the element, which then becomes an anchor to position other elements. This property assumes that the element defines a main box. Otherwise, this property has no effect.

  In our example, the property anchor-name applies the identifier --demo to the image. It thus becomes an anchor for other elements, like the tooltip text.

  The positioned text (tooltip) must be fixed or absolute. It also gets the property position-anchor, which defines which anchor it should align with, and the property position-area, which defines how it should be positioned, here to the right of the anchor.

  
  Firefox

  
  Anchor names don't need to be unique. If multiple elements share the same anchor name and are all visible, the anchor that will be used is the closest ancestor, or otherwise the last one in the DOM order. The anchor-scope property can be used to further limit visible anchor names.

  On the other hand, anchor names aren't limited by containers; even if an element is a layout container (or any type of container), anchor names are visible to elements elsewhere on the page.

• anchor-name: --id1, --id2;

  It's possible to associate multiple IDs with the same item, separating them with a comma.

• anchor-name: initial; (none) anchor-name: inherit; anchor-name: revert; anchor-name: revert-layer; anchor-name: revert-rule; anchor-name: unset;

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

Tutorial on anchor-based positioning.

Positioning.

We know the position property, which allows you to take an element out of the flow of data to freely position it relative to the window or the page. For this, we use its top, right, bottom, and left properties. Our index bar, for example, is positioned. It stays at the top of the screen without scrolling with the page.

This solution doesn't allow you to position an element relative to another one, for example to create a tooltip. Anchored positioning makes that possible. It's an extension of what the position property can do.

Anchor positioning.

First of all, you need to designate the element that will serve as the anchor. This is done with the anchor-name property by giving it an anchor name. It must start with a double dash.
Then, all elements that need to be positioned relative to this anchor use the position-anchor property. Note that the position property is always required, with the value absolute or fixed.

Here's what it looks like with an example. Click the button to show the CSS code. You can clearly see the property anchor-name on the first element. It sets the name of this element from the perspective of the anchor (--demo1). On the other element, we find the properties position and position-anchor, as well as the properties top and left. They use a function anchor() that we'll talk about again.

Position relative to the anchor.

We remember that the properties top, right, bottom, and left allow you to position an element in the case of standard positioning. They are still the ones that will act in anchor positioning, but with the anchor() function. Here are three examples that use the anchor() function.

It's as if the function returns the position of one of the edges of the anchor.

Size according to the anchor.

It’s possible not only to position the element relative to the anchor but also to size it relative to that anchor. You can do this by using a function as well: anchor-size(). This returns the width or height of the anchor. It accepts the parameters width or height.

The syntax allows writing width:anchor-size(height); but it doesn't make much sense.

Another way to position.

There is another method to position elements relative to the anchor: the position-area property, which handles both horizontal and vertical positioning. Here are the main values for position-area, but there are many others.

To all these values, you can add center center which overlays the element on the anchor. We didn't show it to avoid cluttering the diagram. It's also possible to work by taking the writing mode of the language into account with the values start and end. And you can even position the element across two spots using the keyword span, etc.

The word center can always be omitted. right is equivalent to right center.

Here is an example that uses only the simple values top, right, bottom, and left. Check out the page on the position-anchor property to see all the possibilities.

Optimize the position.

It often happens that when scrolling or zooming, the positioned element disappears from the screen, even though the anchor is still visible. For example, if the positioned element is above the anchor, it will disappear before the anchor when scrolling down. It's possible to define multiple positions so the browser can choose the one that works best for the current situation. The position-try-fallbacks property (or the shorthand position-try property) lets you set another position so the browser can pick the one that fits the current situation best.

For proper functioning, the property position must have the value fixed. As you scroll, you'll notice that the positioned element moves above or below the anchor when it disappears at the bottom or top of the screen, so that it is always the last to disappear between itself and the anchor.

 :

There is often more to define than just the position: you often need to change the margins, alignment, etc. The @position-try directive allows you to group all these properties under a single name starting with a double dash. This identifier can then be used with position-try-fallbacks.

To find out more.

Anchor positioning is one of the most powerful features of CSS. Here, we've only outlined some of these possibilities. Check out the different properties for more information.

Animation of the anchor-name property.

The property anchor-name can be animated in a discrete way (a sudden jump from one value to another). Here's what you can do with anchor-name animation.

Browsers compatibility with anchor-name.

Support for the anchor-name property is now working properly across all major browsers.

1

Anchoring
positioning

2

anchor-name
property

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

Safari

Safari sur IOS

Opéra

Firefox pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the anchor-name 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 anchor-name Introduction of the anchor-name property in this first level of the specification.
  

  June 29, 2023

  Working Draft.

  

  

  

See also, about anchor positioning.

The anchor-name property is described in the CSS Anchor Positioning, as well as the other properties related to anchor positioning.

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:

At-rules:

⚠

@position-try

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