Position-try-order - CSS Property

Syntax diagram of position-try-order.

Description of the position-try-order property.

Anchor positioning is a new CSS feature that lets you position one element relative to another. The element used as a reference is called the anchor. It gets an anchor ID with the anchor-name property. Elements positioned relative to this anchor need to be in absolute or fixed position (see the position property). They’re linked to the anchor using the position-anchor property.

position-anchor sets the element's position precisely relative to this anchor (above, below, left, etc.). But if you scroll or zoom, this position might end up outside the viewport. For this reason, position-try-fallbacks provides a list of fallback positions. position-try-order defines which positions in this list can be used.

Also check out the page on position-try which is a shorthand property that lets you set position-try-order and position-try-fallbacks in a single step.

Values for position-try-order.

• position-try-order: normal;

  The order of the spots set by position-try-fallbacks is kept. So the position-try-order property has no effect.

  Scroll down the page until the text at the top of the screen moves to the right of the anchor, then, if you shrink the window width, it moves below the anchor. On a mobile phone, this is hard to notice because the narrow window width interferes with how it works.

  ⚓
  Élément positionné
  position-try-fallbacks:--top,--right,--bottom;
position-try-order:normal;
• position-try-order: most-width; position-try-order: most-inline-size;

  The positioned element is placed primarily where it has the most width, or along the direction of the lines, among the locations mentioned by position-try-fallbacks.

  In our example, the --right position is ignored because it gives less width than the --top and --bottom positions. On a laptop, this isn’t guaranteed: to see how position-try-order works, you’ll need to check this page on a computer.

  ⚓
  Élément positionné
  position-try-fallbacks:--top,--right,--bottom; ;
position-try-order:most-width;
• position-try-order: most-height; position-try-order: most-block-size;

  The positioned element is placed primarily where it has the most space in height, or along the block direction.
  In our example, it can't even jump above or below the anchor because those --top and --bottom positions leave less space.

  However, if you reduce the window width, there comes a point where the available height is greater than the available width. At that moment, the positioned element is placed above or below the anchor. On a laptop, these manipulations are not possible.

  ⚓
  Élément positionné
  position-try-fallbacks:--top,--right,--bottom;
position-try-order:most-height;
• position-try-order: initial; (normal) position-try-order: inherit; position-try-order: revert; position-try-order: revert-layer; position-try-order: revert-rule; position-try-order: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the position-try-order property.

Browsers compatibility with position-try-order.

The position-try-order property is now well recognized by modern 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-order
property

Estimated overall support.

86%

86%

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-order 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-order First presentation of the property position-try-order (anchoring positioning).
  

  June 29, 2023

  Working Draft.

  

  

  

See also, about anchor positioning.

The properties, functions, and the at-rule related to anchor positioning are grouped in the CSS Anchor Positioning module. You'll also find a list of them below.

Properties:

Functions:

At-rules: