`position-try-order` CSS property

The position-try-order CSS property allows you to prioritize the position-try-fallbacks option applied to an anchor-positioned element when it first renders, based on which option creates the most space around the element in the given direction.

Syntax

/* Keywords */
position-try-order: normal;
position-try-order: most-height;
position-try-order: most-width;
position-try-order: most-block-size;
position-try-order: most-inline-size;

/* Global values */
position-try-order: inherit;
position-try-order: initial;
position-try-order: revert;
position-try-order: revert-layer;
position-try-order: unset;

Values

The position-try-order property may be specified as either the keyword value normal or a <try-size>.

normal

The default. No position-try fallback options will be tried when the element is first rendered.

<try-size>

Defines which criteria will be used to determine what try fallback should be applied to the anchor-positioned element when it initially renders. Available values are:

most-height

Applies the position try fallback option that gives the element the most vertical space.

most-width

Applies the position try fallback option that gives the element the most horizontal space.

most-block-size

Applies the position try fallback option that gives the element the most space in the block direction.

most-inline-size

Applies the position try fallback option that gives the element the most space in the inline direction.

Description

The position-try-order property has a slightly different focus from the rest of the position-try features, in that it influences which position-try fallback option is applied when the positioned element is first displayed, rather than when it is being scrolled. For example, you might want to initially display the element in a space that has more available height or width than the default initial position.

The browser tests the available position-try-fallbacks to find which one gives the anchor-positioned element the most space in the specified direction. It will then apply that option, overriding the element's initial styling when the page first renders.

If no position try fallback option is available that provides more width/height than the initial positioning assigned to the element, no position try option will be applied, the same as if position-try-order were set to normal.

For detailed information on anchor features and position try option usage, see the CSS anchor positioning module and the Fallback options and conditional hiding for overflow guide.

The position-try-order property, along with the position-try-fallbacks property, can also be set by using the position-try shorthand.

Formal definition

Formal syntax

position-try-order = 
  normal |
  <try-size>

<try-size> = 
  most-width |
  most-height |
  most-block-size |
  most-inline-size

Examples

Basic usage

This example shows the effect of position-try-order.

HTML

The HTML includes two <div> elements that will become an anchor and an anchor-positioned element.

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

CSS

In the CSS, we start by setting a position-try-order value of normal on the anchor-positioned element, so it is easier to find when we ask you to edit it later on:

.infobox {
  position-try-order: normal;
}

The anchor is given an anchor-name and a large margin to position it near center of the viewport:

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

.anchor {
  anchor-name: --my-anchor;
  margin: 90px auto;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
}

We include a custom position option named --custom-bottom, which will positions the anchor-positioned element below the anchor and give it an appropriate margin:

@position-try --custom-bottom {
  top: anchor(bottom);
  bottom: unset;
  margin-top: 10px;
}

We initially position the anchor-positioned element above its anchor, and then give it our custom position option using the position-try-fallbacks property.

.infobox {
  position: fixed;
  position-anchor: --my-anchor;

  bottom: anchor(top);
  margin-bottom: 10px;
  justify-self: anchor-center;

  position-try-fallbacks: --custom-bottom;
}

Result

Initially, the anchor-positioned element is positioned above its anchor, which is the default position we've given it.

Now open the example in the MDN Playground by pressing the Play button, run the example, then change the position-try-order to most-height or most-block-size. When the example re-renders, the anchor-positioned element is positioned below its anchor: --custom-bottom fallback is applied because it gives the positioned element more surrounding height than the default position.

Specifications

Browser compatibility

See also

• position-try
• position-try-fallbacks
• The @position-try at-rule
• CSS anchor positioning module
• Using CSS anchor positioning guide
• Fallback options and conditional hiding for overflow guide