position-try-order

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 displayed.

<try-size>

Defines the different try size fallback options, which specify criteria that determine what try fallback should be applied to the anchor-positioned element when it initially renders. Available values are:

most-height

The position try fallback option will be applied that gives the element's containing block the most height.

most-width

The position try fallback option will be applied that gives the element's containing block the most width.

most-block-size

The position try fallback option will be applied that gives the element's containing block the largest size in the block direction.

most-inline-size

The position try fallback option will be applied that gives the element's containing block the largest size in the inline direction.

The position-try-order property has a slightly different focus from the rest of the position-try functionality features, in that it makes use of position-try fallback options 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 will test the available position-try fallback options to find which one gives the anchor-positioned element the most space in the specified dimension. It will then apply that option, overriding the element's initial styling.

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. In effect, the behavior is as if position-try-order was set to normal.

For detailed information on anchor features and position try option usage, see the CSS anchor positioning module landing page and the Handling overflow: try fallbacks and conditional hiding guide.

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

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

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

HTML

The HTML includes two <div> elements that will become an anchor and an anchor-positioned element, and a <form> containing radio buttons allowing you to select different values of position-try-order.

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

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

<form>
  <fieldset>
    <legend>Choose a try order</legend>
    <div>
      <label for="radio-normal">normal</label>
      <input
        type="radio"
        id="radio-normal"
        name="position-try-order"
        value="normal"
        checked />
    </div>
    <div>
      <label for="radio-most-height">most-height</label>
      <input
        type="radio"
        id="radio-most-height"
        name="position-try-order"
        value="most-height" />
    </div>
  </fieldset>
</form>

CSS

In the CSS, the anchor is given an anchor-name and has a large margin to position it toward the top 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: --myAnchor;
  margin: 90px auto;
}

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

form {
  position: fixed;
  bottom: 2px;
  right: 2px;
}

We then include a custom position option named --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 give it our custom position option using the position-try shorthand, which also sets the position-try-order property to normal:

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

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

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

JavaScript

Finally, we include some JavaScript. This sets a change event handler on the radio buttons so that, when a new value is selected, that value is applied to the infobox's position-try-order property.

const infobox = document.querySelector(".infobox");
const form = document.forms[0];
const radios = form.elements["position-try-order"];

for (const radio of radios) {
  radio.addEventListener("change", setTryOrder);
}

function setTryOrder(e) {
  const tryOrder = e.target.value;
  infobox.style.positionTryOrder = tryOrder;
}

Result

Try selecting the most-height order option. This has the effect of applying --custom-bottom as a position try fallback option, which positions the element below the anchor. This occurs because there is more vertical space below the anchor than there is above it.

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