position-try

This property is a shorthand for the following CSS properties:

• position-try-order
• position-try-fallbacks

See position-try-order and position-try-fallbacks for value descriptions.

The position-try shorthand can specify values for position-try-fallbacks, or position-try-order and position-try-fallbacks, in that order. If position-try-order is omitted, it is set to the property's initial value, which is normal, meaning the position-try fallback options are tried in the order they appear in the property.

position-try = 
  <'position-try-order'>? <'position-try-fallbacks'>  

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

<position-try-fallbacks> = 
  none                                                |
  [ [ <dashed-ident> || <try-tactic> ] | <'position-area'> ]#  

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

<try-tactic> = 
  flip-block   ||
  flip-inline  ||
  flip-start   

<position-area> = 
  none             |
  <position-area>  

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-end | span-all ]  |
  [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ]  |
  [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ]  |
  [ start | center | end | span-start | span-end | span-all ]{1,2}  |
  [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}  

This demo shows the effect of position-try.

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, the anchor is given an anchor-name and has a position value of absolute set on it. We position it in the top-half of the viewport using top and left values:

.anchor {
  anchor-name: --myAnchor;
  position: absolute;
  top: 100px;
  left: 45%;
}

We then include a custom position option — --custom-bottom — which positions the element below the anchor and gives it an appropriate margin:

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

We initially position the element above its anchor, and then set a position-try value on it that gives it a position-try-order of most-height, and a position-try-fallbacks list that just includes our custom fallback option:

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

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

  position-try: most-height --custom-bottom;
}

Result

The element appears below its anchor, even though it is initially positioned above it. This occurs because there is more vertical space below the anchor than there is above it. The most-height try order causes the --custom-bottom try fallback option to be applied, placing the positioned element in the position that gives its containing block the most height.

• position-area
• position-try-fallbacks
• position-try-order
• The @position-try at-rule
• The <position-area> value
• CSS anchor positioning module
• Using CSS anchor positioning guide
• Handling overflow: try fallbacks and conditional hiding guide