---
title: 'CSS Anchor Positioning Fallbacks: Auto-Flip Guide (2026)'
description: Make CSS anchored dropdowns and tooltips flip and hide when they overflow using position-try-fallbacks and @position-try. Runnable 2026 cross-browser guide.
url: https://nerdleveltech.com/css-anchor-positioning-fallbacks
language: en
date: '2026-06-18'
category: frontend
tags:
  - css anchor positioning
  - position-try-fallbacks
  - '@position-try'
  - position-area
  - dropdown
  - frontend
  - css
markdown_url: https://nerdleveltech.com/css-anchor-positioning-fallbacks.md
attribution: 'Source: NerdLevelTech — https://nerdleveltech.com/css-anchor-positioning-fallbacks'
terms: https://nerdleveltech.com/llms.txt
---

# 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 81% 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`:

```css
.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).[^mdn-fallbacks] 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.[^mdn-fallbacks] 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.[^chrome-rename] 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:

```css
@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.[^mdn-fallbacks] 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: `inline-start`/`center`/`inline-end`).[^mdn-posarea] 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`.[^mdn-anchor] 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:

```css
.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).[^mdn-hiding] 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.[^caniuse][^webkit] 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 81% of global users as of mid-2026.[^caniuse]

| Browser | First version with default support |
|---|---|
| Chrome | 125 |
| Edge | 125 |
| Firefox | 147 (stable 2026-01-13) |
| Safari (macOS + iOS) | 26.0 |
| Opera | 111 |
| Samsung Internet | 27 |

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.[^caniuse][^moz-bug] 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:

```css
.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.[^polyfill] 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.[^popover]

## FAQ

**How do I make a CSS anchored element flip when it overflows?**
Add `position-try-fallbacks` to the positioned element and list placements such as `flip-block, flip-inline, flip-block flip-inline`. The browser keeps the default position while it fits and switches to the first fallback that avoids overflow.

**Why isn't my position-try-fallbacks working?**
Usually because you only listed single-axis flips, so a corner overflow has no valid fallback — add the combined `flip-block flip-inline` option. Also confirm the element actually overflows (fallbacks never fire otherwise) and that you're using the current property names, not the renamed `position-try-options`/`inset-area`.

**What is the difference between position-area and anchor()?**
`position-area` places the element on a 3×3 grid around the anchor using keywords like `bottom span-right` — quick and covers most cases. `anchor()` goes inside inset properties to pin to an exact anchor edge, e.g. `bottom: anchor(top)` — more precise and supports multiple anchors.

**Does Safari support @position-try?**
Yes, since Safari 26.0 (September 2025) on macOS and iOS. Earlier "Safari lacks @position-try" advice refers to the flagged 18.x preview period and is outdated.

**How do I hide an anchored element when its anchor scrolls off screen?**
Set `position-visibility: anchors-visible` to hide the element once the anchor is fully clipped, or `no-overflow` to hide it when the element itself overflows. It's newer than the core properties, so check support before depending on it.

**Is CSS anchor positioning production ready in 2026?**
For roughly 81% of users yes — Chrome/Edge 125+, Firefox 147+, and Safari 26+ all support it by default. Provide a plain-CSS base position (or the OddBird polyfill) for older Firefox and Safari.

## 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](https://nerdleveltech.com/introduction-to-css-presentation-part-1), shipping a flicker-free [Tailwind v4 dark mode](https://nerdleveltech.com/tailwind-v4-dark-mode), and debugging [the View Transitions API when it's not working](https://nerdleveltech.com/react-viewtransition-not-working).

[^mdn-fallbacks]: MDN Web Docs — "position-try-fallbacks". https://developer.mozilla.org/en-US/docs/Web/CSS/position-try-fallbacks
[^chrome-rename]: Chrome for Developers — "Anchor positioning syntax changes" (inset-area → position-area; position-try-options → position-try-fallbacks). https://developer.chrome.com/blog/anchor-syntax-changes
[^mdn-posarea]: MDN Web Docs — "position-area". https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position-area
[^mdn-anchor]: MDN Web Docs — "anchor() CSS function". https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/anchor
[^mdn-hiding]: MDN Web Docs — "Fallback options and conditional hiding for overflow" (position-visibility). https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Try_options_hiding
[^caniuse]: Can I use — "CSS Anchor Positioning" (global usage ~80.74%, StatCounter GlobalStats, as tracked mid-2026). https://caniuse.com/css-anchor-positioning
[^webkit]: WebKit — "WebKit Features in Safari 26.0" (2025-09-15). https://webkit.org/blog/17333/webkit-features-in-safari-26-0/
[^moz-bug]: Mozilla Bugzilla 1988225 — "Enable anchor positioning pref (layout.css.anchor-positioning.enabled) by default on all channels". https://bugzilla.mozilla.org/show_bug.cgi?id=1988225
[^polyfill]: OddBird — CSS Anchor Positioning Polyfill. https://github.com/oddbird/css-anchor-positioning
[^popover]: web.dev — "The Popover API is now Baseline Newly available". https://web.dev/blog/popover-baseline