position-try-order CSS property
Baseline 2026
Newly available
Since February 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Want more browser support for this feature? Tell us why.
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.
Note:
There is also a shorthand property — position-try, which can be used to specify position-try-order and position-try-fallbacks values in a single declaration.
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.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | absolutely positioned elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
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 {
anchor-name: --my-anchor;
margin: 90px auto;
}
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
| Specification |
|---|
| CSS Anchor Positioning Module Level 1 # position-try-order-property |