Position-try-fallbacks - CSS Property

Syntax diagram of position-try-fallbacks.

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

• --id is an identifier (which must start with a double dash) created by @position-try.
• position is a position (identical to those of position-area.

Description of the position-try-fallbacks property.

Anchor positioning involves placing an element relative to another (see Anchor positioning). The element used as a reference (the anchor) gets an ID (via anchor-name). This can then be used on other elements to position them with position-anchor.
Positioning can be precise: to the right, above, etc., of the anchor using the position-area property. You can also set an alternative position with position-try-fallbacks in case the positioned text disappears before its anchor, for example due to scrolling.

In the example below, as you scroll down the page, you'll notice that the positioned element is first above the anchor, then, when scrolling starts to make it disappear, it goes below the anchor. Until scrolling back up makes it disappear at the bottom of the window, it goes back above the anchor.

The default position of the element is still set by position-area. If the positioned element is fully visible, considering scrolling, zooms, etc., the position-try-fallbacks property is ignored.

By using position-try-fallbacks correctly, it's possible to make the positioned element stay visible as long as possible, even when scrolling or zooming on the page.

See also the shorthand property position-try, as well as the anchor-name property, which gives a summary of useful properties in anchor positioning.

Values for position-try-fallbacks.

• position-try-fallbacks: none;

  With the value none, the property position-try-fallbacks has no effect.

• position-try-fallbacks: bottom;

  A value or a series of values accepted by the position-area property. If multiple values are specified, they must be separated by a comma (currently, browsers do not handle series of values). One of these values is applied, in order, to position the element.

  Scroll down this page until the text is at the top of the screen. You'll then see it pass under the anchor.

  ⚓
  Positioned element
  position-area:top;
position-try-fallbacks:bottom;
• position-try-fallbacks: flip-block; position-try-fallbacks: flip-y;

  The flip-block value reverses the positioning between the start and end of a block. It also swaps the start and end block margin values. It is sensitive to the writing mode of the language used.
  For example, for latin languages, flip-block swaps the positions above and below the anchor.

  flip-y is the same but isn’t affected by the language writing mode.

  ⚓
  Positioned element
  position-area:top;
position-try-fallbacks:flip-block;
• position-try-fallbacks: flip-inline; position-try-fallbacks: flip-x;

  flip-inline flips the start and end positions of an element's lines. It also swaps the start and end line margin values. So, this value depends on the language's writing mode.
  For latin languages, flip-inline flips left and right.

  flip-x makes the same changes, without being sensitive to the writing direction of the language.

  To see how it works, reduce the width of your browser window until the right edge reaches the positioned text.
  On a phone or a device with a small screen, the small window width makes position-try-fallbacks activate immediately.

  ⚓
  Positioned element
  position-area:right;
position-try-fallbacks:flip-inline;
• position-try-fallbacks: flip-start;

  The flip-start value swaps the start values with each other, and the end values with each other. For example, it changes the positioned element from block-start to inline-start and from block-end to inline-end. This also works if the values are given in physical values or in XY values.

  Scroll down the page to see how it works on the first example. You'll need to reduce the window width for the second example.
  On a phone or a device with a small screen, the small window width prevents it from working.

  ⚓

  ⚓
  Positioned element
  position-area:top
position-try-fallbacks:flip-start;
  Positioned element
  position-area:bottom
position-try-fallbacks:flip-start;
• position-try-fallbacks: --id1, --id2;

  --id1 and --id2 are identifiers defined by the @position-try directives. They can group several properties, like margins, for example.
  Multiple identifiers can be listed, separated by commas.

  In the example below, the positioned element first moves to the right of the anchor, then, if you shrink the window width, it moves below the anchor.
  On a phone or a device with a small screen, the narrow window width interferes with how it works: the positioned text goes straight to --pos2, without going through --pos1.

  ⚓
  Positioned element
  position-area:top;
position-try-fallbacks:--pos1,--pos2;
• position-try-fallbacks: initial; (none) position-try-fallbacks: inherit; position-try-fallbacks: revert; position-try-fallbacks: revert-layer; position-try-fallbacks: revert-rule; position-try-fallbacks: unset;

  Links to the presentation of these different values: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the position-try-fallbacks property.

Browsers compatibility with position-try-fallbacks.

The property position-try-fallbacks is well supported 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-fallbacks
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-fallbacks 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-fallbacks First presentation of the property position-try-fallbacks.
  

  June 29, 2023

  Working Draft.

  

  

  

See also, about anchor positioning.

Anchor positioning is one of the most interesting features of CSS. All the properties, functions, or directives related to this feature are grouped in the specification CSS Anchor Positioning.

Properties:

Functions:

At-rules: