position-try

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The position-try CSS property is a shorthand that corresponds to the position-try-order and position-try-fallbacks properties.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css

/* position-try-fallbacks only */
position-try: normal flip-block;
position-try: top;
position-try: --custom-try-option;
position-try: flip-block flip-inline;
position-try: top, right, bottom;
position-try: --custom-try-option1, --custom-try-option2;
position-try:
  normal flip-block,
  right,
  --custom-try-option;

/* position-try-order and position-try-fallbacks */
position-try: normal none;
position-try:
  most-width --custom-try-option1,
  --custom-try-option2;
position-try:
  most-height flip-block,
  right,
  --custom-try-option;

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

Values

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.

Formal definition

Initial value	as each of the properties of the shorthand: `position-try-options`: `none` `position-try-order`: `normal`
Applies to	absolutely positioned elements
Inherited	no
Computed value	as each of the properties of the shorthand: `position-try-options`: as specified `position-try-order`: as specified
Animation type	as each of the properties of the shorthand: `position-try-options`: discrete `position-try-order`: discrete

Formal syntax

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}

Examples

Basic `position-try` usage

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.

html

<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 {
  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;
}

css

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

.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 — --custom-bottom — which positions the element below the anchor and gives it an appropriate margin:

css

@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:

css

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

Specifications

Specification
CSS Anchor Positioning # position-try-prop

Browser compatibility

BCD tables only load in the browser