@position-try

The @position-try CSS at-rule is used to define a custom position try fallback option, which can be used to define positioning and alignment for anchor-positioned elements. One or more sets of position try fallback options can be applied to the anchored element via the position-try-fallbacks property or position-try shorthand. When the positioned element is moved to a position where it starts to overflow its containing block or the viewport, the browser will select the first position try fallback option it finds that places the positioned element fully back on-screen.

Each position option is named with a dashed-ident and contains a descriptor list specifying declarations that define information such as inset position, margin, sizing, and self-alignment. The dashed-ident is used to reference the custom position option in the position-try-fallbacks property and position-try shorthand.

For detailed information on anchor features and position try fallback usage, see the CSS anchor positioning module landing page and the Fallback options and conditional hiding for overflow guide.