position-try CSS property

Constituent properties

This property is a shorthand for the following CSS properties:

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

Syntax

/* 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

This property is specified as one or both of the following properties:

position-try-order Optional

A keyword specifying the priority order of the position-try fallback options. If omitted, defaults to normal.

position-try-fallbacks

The keyword none, or a comma-separated list of <position-area> values,<try-tactic> options, and custom positions.

Description

The position-try shorthand property can be used to specify the position-try-order and position-try-fallbacks properties in a single declaration. It specifies the position-try-order and position-try-fallbacks, in that order. If the position-try-order component is omitted, it defaults to normal.

The position-try-fallbacks is a comma-separated list of one or more alternative position try fallback options for anchor-positioned elements to be placed relative to their associated anchor elements. When the element would otherwise overflow its inset-modified containing block, the browser will try placing the positioned element in these different fallback positions, in the order provided, until it finds a value that stops it from overflowing its container or the viewport.

The position-try-order prioritizes 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. If 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

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   ||
  flip-x       ||
  flip-y       

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | self-x-start | self-x-end | span-self-x-start | span-self-x-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | self-y-start | self-y-end | span-self-y-start | span-self-y-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.

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

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

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  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:

@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: --my-anchor;

  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

Browser compatibility

See also

• 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
• Fallback options and conditional hiding for overflow guide