@position-try - CSS At-rule

Description of the @position-try at-rule.

Anchor positioning allows you to position one element relative to another (the anchor). The latter has been given an identifier through the anchor-name property. The element or elements being positioned are linked to it through the position-anchor property.

The directive @position-try defines an identifier for a set of properties. This name can then be used by the property position-try-fallbacks or the shorthand property position-try. All properties of @position-try are then applied. The identifier must start with a double dash.

The basic syntax of@position-try is as follows:

Les seules propriétés autorisées dans la liste sont :

• The dimension properties: width, height, min-height, max-height, etc.
• The properties that define margins: margin-top, margin-right, margin-block-start, margin-inline-start, etc. and the corresponding shorthand properties.
• Positioning properties: top, inset-block-start, etc. and the corresponding shorthand properties.
• The alignment properties of the element itself: align-self, justify-self, and place-self.
• The position-anchor property and the position-area property.

The !important clause is invalid in a @position-try directive. Using it makes the property invalid, but the rest of the directive remains valid.

For more information on anchor positioning, the page anchor-name provides a list of useful terms and a tutorial on anchor positioning.

Examples of use of the @position-try at-rule.

The text is first positioned below the anchor, with a top margin of 5 pixels. By slowly scrolling the content down, you'll move the text above the anchor, with a bottom margin of 5 pixels. To put the text back below the anchor, you'll need to do the opposite: scroll the page down until the positioned text starts to go off the screen at the top.

All these features are defined by two directives @position-try. The first one sets the name --bottom, which applies when the positioned text is below the anchor. The second sets the name --top, which applies when the positioned text is above the anchor.
The switch from one position to the other is defined by position-try-fallbacks.

Browsers compatibility with the @position-try at-rule.

The directive @position-try is well recognized by browsers. But there are a few subtleties not described in the standard:

• When there are multiple anchors on the page, each element (anchors and positioned texts) must have an ID even if it's not used.
• There's a difference between position:absolute and position:fixed.

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
positionning

2

@position-try
at-rule

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

Evolution of the @position-try at-rule.

• 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-try Introduction of the @position-try at-rule, as well as all the properties involved in the anchoring positioning.
  

  June 29, 2023

  Working Draft.

  

  

  

See also, on anchor positioning.

The directive @position-try is the only one defined in the CSS Anchor Positioning. But there are quite a few properties:

Properties:

Functions:

At-rules: