CSS Anchor Positioning Fallbacks: Auto-Flip Guide (2026)

To make a CSS anchored element flip when it overflows the viewport, add position-try-fallbacks to the positioned element with one or more <try-tactic> values like flip-block, flip-inline, or flip-block flip-inline. The browser keeps its default position when it fits and only switches to a fallback when the element would overflow.

TL;DR

CSS anchor positioning lets you tether a dropdown, tooltip, or popover to an anchor in pure CSS. The hard part — keeping it on screen — is solved by position-try-fallbacks and the @position-try at-rule, which try alternate placements only when the default one overflows. As of 2026 the feature is supported in Chrome/Edge 125+, Firefox 147+, and Safari 26+ (about 83% of users), so you can ship it with a sensible base position for everyone else. This guide builds an auto-flipping dropdown, explains why fallbacks sometimes don't fire, and adds conditional hiding with position-visibility.

What you'll learn

• How position-try-fallbacks flips an anchored element away from a viewport edge
• Why your fallbacks aren't firing (and the one fix that solves most cases)
• Writing a custom @position-try fallback for fine control
• The difference between position-area and the anchor() function
• Hiding an anchored element with position-visibility when its anchor scrolls away
• The verified 2026 cross-browser support picture, including Safari and @position-try

How do I make a CSS anchored element flip when it overflows?

Add position-try-fallbacks to the positioned element and list the placements the browser may try when the default one overflows. The browser uses your base position first and only applies a fallback on overflow — fallbacks are never used while the element fits.

Start with a minimal anchor and a positioned dropdown. The anchor gets an anchor-name; the dropdown points at it with position-anchor and places itself with position-area:

.menu-button {
  anchor-name: --menu-btn;
}

.menu {
  position: absolute;
  position-anchor: --menu-btn;
  /* Base position: directly below the button, left edges aligned. */
  position-area: bottom span-right;
  margin-top: 6px;

  /* If "below" overflows, try these in order until one fits. */
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

The three predefined <try-tactic> values are flip-block (flips the position along the block axis — below becomes above), flip-inline (flips along the inline axis — right becomes left), and flip-start (mirrors across a diagonal axis, swapping the block and inline directions).¹ Combine two in a single space-separated option, like flip-block flip-inline, to flip diagonally. Browsers evaluate the list left to right and pick the first option that keeps the element fully on screen.

Why isn't my position-try-fallbacks working?

The most common reason is that you only gave the browser single-axis flips. If the anchor sits near a corner, the element can overflow in both directions at once, and neither flip-block nor flip-inline alone fixes that — you also need the combined flip-block flip-inline option.¹ That is exactly why the example above lists all three.

Two more things trip people up. First, fallbacks only trigger on overflow: if the element fits in its default spot, the list is ignored entirely, which can look like "nothing happened." Second, your CSS may predate a 2024 rename. The property used to be position-try-options and position-area used to be inset-area; both were renamed, so older snippets silently do nothing in current browsers.² Use the current names: position-try-fallbacks and position-area.

How do I write a custom @position-try fallback?

Use the @position-try at-rule to define a named placement, then reference that name in position-try-fallbacks. This gives you control the predefined tactics can't, such as adjusting margins or switching which inset edges anchor to which side:

@position-try --above {
  top: auto;
  bottom: anchor(top);
  margin-top: 0;
  margin-bottom: 6px;
}

@position-try --shift-left {
  position-area: bottom span-left;
}

.menu {
  position: absolute;
  position-anchor: --menu-btn;
  position-area: bottom span-right;
  margin-top: 6px;

  position-try-fallbacks: --above, --shift-left;
}

Each @position-try name starts with two dashes (it's a <dashed-ident>). You can mix custom names and predefined tactics in one fallback option — when you do, the custom option is applied first and the tactic transform is applied on top of it.¹ If a name in the list doesn't match any @position-try rule, that entry is simply skipped, which is another quiet reason a fallback may "not work."

What is the difference between position-area and the anchor() function?

position-area is the quick, grid-based way to place an element; anchor() is the precise, edge-based way. They solve the same problem at different levels of control.

position-area treats the anchor as the center cell of an implicit 3×3 grid and lets you drop the element into one or more tiles with keywords like top, bottom span-right, or bottom span-all. Rows are top/center/bottom (logical: block-start/center/block-end) and columns are left/center/right (logical: start/center/end).³ It covers most dropdown and tooltip cases in a single line.

The anchor() function goes inside inset properties (top, left, inset-block-start, and so on) and returns a length at a specific edge of the anchor, such as bottom: anchor(top) or left: anchor(right). It accepts physical sides, logical sides (start, end, self-start, self-end), and center.⁴ Reach for anchor() when you need to pin to an exact edge or position relative to more than one anchor; reach for position-area when a grid cell is enough.

How do I hide an anchored element when its anchor scrolls off screen?

Use the position-visibility property. It conditionally hides the positioned element based on overflow or anchor visibility, which is useful when a tooltip would otherwise float in empty space after its anchor scrolls out of a container:

.menu {
  position: absolute;
  position-anchor: --menu-btn;
  position-area: bottom span-right;

  /* Hide the menu entirely once the button is fully clipped. */
  position-visibility: anchors-visible;
}

position-visibility has three values: always (the default — always shown), no-overflow (strongly hide the element when it starts to overflow its container or the viewport), and anchors-visible (strongly hide it when the anchor is completely hidden by overflow or by being covered).⁵ It is newer than the core anchoring properties and still settling in across engines, so treat it as a progressive enhancement and verify support for your targets before relying on it in production.

Does Safari support CSS anchor positioning and @position-try?

Yes. Safari shipped CSS anchor positioning — including the @position-try at-rule and position-try-fallbacks — in Safari 26.0 (released September 2025), for both macOS and iOS.⁶⁷ Older guidance that says "Safari supports anchor() but not @position-try" describes the flagged Safari 18.x preview era and is now out of date; the stable shipping version supports the fallback machinery.

That said, anyone on Safari 18.7 or earlier has no anchor positioning at all, so a graceful base position still matters (see the cross-browser section below).

Is CSS anchor positioning production ready in 2026?

For most audiences, yes — with a fallback plan for older browsers. According to caniuse, the feature is supported by default in Chrome and Edge 125+, Safari 26.0+, Firefox 147+, Opera 111+, and Samsung Internet 27+, reaching roughly 83% of global users as of April 2026.⁶

Firefox was the last major engine to land it: 145–146 had it behind the layout.css.anchor-positioning.enabled preference, and 147 turned it on by default.⁶⁸ The practical takeaway is that anchor positioning is a fine choice for new work today, as long as users on pre-147 Firefox or pre-26 Safari still see a usable layout.

How do I keep it usable in browsers without anchor positioning?

Keep your base position outside any @position-try block, and let the fallbacks add only the flip enhancement. Browsers that don't understand anchor positioning ignore the unknown properties and fall back to your normal positioning, so the element still renders somewhere sane:

.menu {
  /* Plain CSS fallback for engines with no anchor positioning. */
  position: absolute;
  top: 100%;
  left: 0;

  /* Progressive enhancement for engines that support it. */
  position-anchor: --menu-btn;
  position-area: bottom span-right;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

For teams that need anchoring to work on older browsers, OddBird maintains a CSS anchor positioning polyfill that backfills the behavior; pair it with progressive enhancement rather than shipping it to every visitor.⁹ The @position-try flip experience also pairs naturally with the Popover API (popover attribute plus popovertarget), which has been Baseline since January 2025 and handles top-layer rendering, Escape, and light-dismiss for you.¹⁰

Bottom line

CSS anchor positioning finally makes "keep this dropdown on screen" a styling problem instead of a JavaScript one. List a few position-try-fallbacks, include the diagonal flip-block flip-inline option, define a custom @position-try when you need precise control, and add position-visibility to hide elements whose anchors scroll away. Pin a plain base position so pre-147 Firefox and pre-26 Safari still render cleanly, and you have a robust, mostly-CSS solution.

If you're building modern UI in CSS, see our companion guides on getting started with CSS layout and presentation, shipping a flicker-free Tailwind v4 dark mode, and debugging the View Transitions API when it's not working.