CSS Anchor Positioning Generator

CSS Anchor Positioning is a 2024 CSS feature that lets one element (the target) be positioned relative to another element (the anchor) using pure CSS. The anchor declares an identifier with anchor-name: --x, the target opts in with position-anchor: --x, and then either the position-area shorthand (e.g. position-area: top) or the explicit anchor() function (e.g. top: anchor(--x bottom)) places the target. The browser handles all the math — including scroll, resize, and reflow — without any JavaScript. It replaces the popular Floating UI / Popper.js / Tippy libraries for tooltips, dropdowns, popovers, and dialogs.

As of April 2026 Firefox has not yet shipped CSS Anchor Positioning. The feature is tracked in Bugzilla (bug 1838746) and is on the roadmap, but no concrete ship date is committed. For Firefox-friendly production code, use Oddbird's CSS Anchor Positioning Polyfill (a small JavaScript shim that backfills the syntax in unsupported browsers), or wrap your anchor styles in @supports (anchor-name: --x) { ... } and provide an explicit position: absolute fallback for browsers without support. The 'browser-fallback-strategy' example on this page walks through both approaches.

anchor-name is set on the anchor element — it declares 'I am an anchor; here is my identifier'. position-anchor is set on the target element — it says 'I want to follow the anchor identified by this name'. They must use the same custom-property identifier (both starting with --) for the connection to work. Think of anchor-name as a label you stick on the anchor, and position-anchor as the address the target ships to. In simple cases both have the same value; in advanced cases (multiple targets sharing one anchor, or one target switching anchors via JavaScript), they decouple.

Yes. Anchor positioning works with both position: absolute and position: fixed. The semantic difference is the same as ever: absolute positions the target relative to its containing block (the nearest positioned ancestor), while fixed positions it relative to the viewport. Both will follow the anchor's resolved position as the page scrolls or reflows. position: fixed is the right choice for tooltips and popovers that should escape an overflow: hidden ancestor (the classic 'tooltip clipped by a card boundary' problem). The toggle in this generator lets you switch between absolute and fixed and copy the corresponding CSS.

position-try-fallbacks is a list of alternate placements the browser tries (in order) when the target would overflow its containing block. The most common values are flip-block (try the opposite block-axis side, e.g. swap top → bottom), flip-inline (swap left → right), or 'flip-block flip-inline' (swap both). You can also list specific position-area values like 'top, bottom, right, left' to give the browser a priority order. Use it whenever the target could overflow the viewport — almost always for tooltips and popovers that anchor near edges. It is the native equivalent of Floating UI's flip middleware.

CSS Anchor Positioning was designed to pair with the HTML Popover API ([popover] attribute, popovertarget, etc.). The popover element is the target, and the trigger button is the anchor. Set anchor-name on the button, position-anchor on the popover, and the popover automatically follows its trigger — no JavaScript needed for placement. Browsers that support both features (Chrome 125+, Edge 125+, Safari 26+) get a fully declarative tooltip/menu/dialog stack. See the 'anchor-with-popover-api' example on this page for a complete pattern.

Yes. This generator runs entirely in your browser. The anchor and target identifiers, position-area values, fallback lists, and generated CSS are computed and rendered with React state and CSS — nothing is sent to a server. The browser-support banner uses the local CSS.supports() API, not a remote feature-detection service. There is no analytics tied to the values you enter, and the page works offline once loaded, so you can prototype proprietary component-library APIs (anchor names like '--my-app-tooltip') without any data leaving your machine.