@position-try CSS At-Rule

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The @position-try at-rule provides a scoped, non-destructive environment for experimenting with alternative positioning and stacking arrangements for a set of elements without immediately committing those changes to the rest of the page. Conceptually it establishes an isolated positioning context in which the contained rules are evaluated for layout and stacking, producing a parallel layout snapshot that can be inspected, toggled, or conditionally applied. This makes it useful for testing multiple layout hypotheses, previewing overlays or tooltips under different constraints, and performing progressive enhancement where the final position is only adopted after a runtime check or user confirmation.

Inside the @position-try block, rules influence the creation of containing blocks, stacking contexts, and offset calculations just as they would in the normal cascade, but those effects are constrained to the try-context: they do not immediately change the computed positions of elements outside of the block or permanently alter document flow. The browser evaluates these rules in a separate layout pass or a sandboxed layer, allowing authors and scripts to compare outcomes (for example, whether an absolutely positioned menu would collide with a nearby element) before deciding to commit a given layout. Because try-evaluations are isolated, interactions such as pointer events, focus order, and accessibility tree exposure can be controlled independently so previews do not disrupt user input or assistive technologies.

Practical uses for @position-try include A/B layout testing, previewing alternative overlay placements based on runtime measurements, creating adaptive fallbacks for complex position-sensitive components, and safely animating between mutually exclusive layout strategies. It pairs well with existing responsive mechanisms: authors can use it to evaluate multiple candidate placements under different viewport sizes or feature-detection outcomes and then apply the best fit. It also helps avoid layout thrashing by enabling a single, isolated evaluation pass that gathers necessary geometry before touching the main flow.

When authoring with @position-try, keep a few cautions in mind. Try-pass evaluations can be more expensive than ordinary style recalculation because they can require an additional layout or geometry measurement step, so they should be scoped narrowly and used judiciously. Ensure that any previews produced by the try-context are presented in an accessible way — for example, by avoiding moving keyboard focus into a preview-only element or by exposing preview state to assistive technologies when appropriate. Finally, design graceful fallbacks: the page should remain usable if the try-evaluation is skipped or if a commit step is not performed, so that users on constrained devices or with restrictive settings still see a coherent layout.

Syntax

@position-try <custom-ident> {

  <positioning-properties>

}

Values

<custom-ident>
A required identifier that names the positioning strategy.

Rules:
- Must start with --
- Case-sensitive
- Cannot be a CSS keyword
<positioning-properties>
You can use positioning-related properties, including:
- top
- right
- bottom
- left
- inset
- inset-inline
- inset-block
- inset-inline-start
- inset-inline-end
- inset-block-start
- inset-block-end

Example

@position-try --above {

  inset-block-end: anchor(top);

}



@position-try --below {

  inset-block-start: anchor(bottom);

}



@position-try --right {

  inset-inline-start: anchor(right);

}



.tooltip {

  position: absolute;

  position-try: --above, --below, --right;

}

Browser Support

The following information will show you the current browser support for the CSS at-rule @position-try. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.