Position-try - CSS Property

Description of the position-try property.

Anchoring allows you to position one element relative to another. The latter is called the anchor and is given an identifier with the property anchor-name. Other elements can then be positioned relative to this anchor using the property position-anchor (they also need to have their position property set to absolute or fixed). The position-anchor property lets you specify multiple positions so the browser can choose the one that works best, depending on scrolling or zooming.

In short:

• On the anchor: anchor-name to set an anchor ID.
• On the positioned elements:
     - position:absolute or fixed.
     - position-anchor to link the element to its anchor.
     - position-area to specify the location of the item.
     - Possibly position-try to indicate alternative positions.

position-area can be replaced by one of the positioning properties (top, left, etc.) with the function anchor().

position-try is a shorthand property that replaces the following two properties. As usual with shorthand properties, if one of the values isn’t specified, it is set to its initial value.

• position-try-order : Defines a different order for the values listed by position-try-fallbacks.
• 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.

For more details, refer to the pages of the detailed properties: position-try-order and position-try-fallbacks. You can also check out the page on anchor-name for a tutorial on anchor positioning.

Examples with the position-try property.

These examples illustrate some of the many possible syntaxes for position-try.

Positioning values.

In this example, the sorting order is the one in which the values are listed (normal). The positioning values are left, right, and bottom. By default, the text is positioned above the anchor (top) by the position-area property.

First, scroll the page down so that the positioned element ends up at the top of the window; it will move to the right of the anchor. Then, shrink the window to make it move below the anchor. Of course, on a phone, it works very poorly because of the small window size.

Order of preference of values.

Here, the preference of values was changed by the word most-width. The system now prioritizes locations that offer the most width, in this case bottom. The left location, although mentioned first, will only be used afterwards if the element happens to disappear at the bottom.

Use IDs defined by @position-try.

Here the sort order is not specified: so it is set to its initial value (normal). The next two values are identifiers defined by @position-try at-rule. Each of them groups together two properties along with their margins.

Animation of the position-try property.

Browsers compatibility with position-try.

The position-try property is now well recognized by the major current browsers.

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

position-try
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

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 position-try 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-try Presentation of the shorthand property position-try which summarizes the values for position-try-fallbacks and for position-try-order.
  

  June 29, 2023

  Working Draft.

  

  

  

See also, about anchor positioning.

Anchor positioning is one of the most powerful features of CSS. A full specification module is dedicated to it. It brings together the properties, functions, and at-rule listed below:

Properties:

Functions:

At-rules: