CSS Anchor Positioning Playground

What is CSS Anchor Positioning?

CSS anchor positioning lets you tether one element, the positioned element, to another, the anchor, without measuring coordinates in JavaScript. Mark the trigger as an anchor with anchor-name, point a positioned element at it with position-anchor, and place it with position-area or the anchor() function. If the browser detects the positioned element would overflow, position-try-fallbacks can flip it to a position that fits, all in CSS.

It targets the exact problem that JavaScript positioning libraries like Floating UI and Popper.js were built to solve: tooltips, dropdown menus, popovers, and infoboxes that need to stay attached to a trigger element wherever it moves or resizes.

CSS Anchor Positioning Syntax

anchor-name

Set on the element that acts as the anchor. The value must be a dashed ident, it starts with two dashes. One element can carry more than one anchor name, comma separated.

.trigger {
  anchor-name: --my-anchor;
}

position-anchor

Set on the positioned element to connect it to an anchor name. The positioned element still needs position: absolute or position: fixed for anchor positioning to take effect.

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
}

position-area

Places the positioned element on one of nine tiles of an implicit 3x3 grid around the anchor. A single keyword centers on that side, two keywords pin a corner.

.tooltip {
  position-area: top;        /* centered above */
  position-area: top left;   /* above, left-aligned */
  position-area: right;      /* to the right, vertically centered */
}

anchor()

Used inside inset properties for pixel-precise placement instead of the position-area grid. Pair with anchor-center to center on the cross axis.

.tooltip {
  position: absolute;
  top: anchor(bottom);
  left: anchor(left);
  justify-self: anchor-center;
}

position-try-fallbacks

A comma-separated list of alternative positions the browser tries, in order, when the default position would overflow the containing block.

.tooltip {
  position-area: top;
  position-try-fallbacks: flip-block;
}

@position-try

Define a fully custom fallback position, including its own margin and alignment, and reference it by name.

@position-try --below-right {
  position-area: bottom right;
  margin-top: 8px;
}

.tooltip {
  position-try-fallbacks: --below-right;
}

How to Use This Playground

1. Drag the purple anchor button anywhere inside the stage.
2. Click a tile on the position area grid to choose where the tooltip sits relative to the anchor.
3. Adjust the gap slider to add spacing between the anchor and the tooltip.
4. Pick a fallback, then drag the anchor toward an edge of the stage to watch it flip.
5. Change the anchor size to see position-area recalculate against the anchor's real box, not a fixed offset.
6. Click Copy CSS for the generated code, or Share this setup to copy a link with your current settings.

CSS Anchor Positioning Browser Support

As of August 2026, CSS anchor positioning is supported in Chrome and Edge from version 125, Firefox from version 147, and Safari from version 26, putting global usage at roughly 84% according to caniuse. Because these are progressive CSS properties rather than a script dependency, unsupported browsers simply ignore them instead of throwing errors, so it is safe to ship without a polyfill for most projects.

For the remaining older Safari and Firefox versions, the Oddbird polyfill reimplements the behavior in JavaScript. Wrapping your anchor positioned styles in @supports (anchor-name: --a) { ... } with a simpler static fallback outside it is often lighter than shipping the polyfill.

Frequently Asked Questions

What is CSS anchor positioning?

CSS anchor positioning is a set of CSS properties and functions, including anchor-name, position-anchor, anchor(), and position-area, that let you tether one element to another using pure CSS. It removes the need to calculate coordinates in JavaScript for tooltips, popovers, dropdowns, and infoboxes that need to track an anchor element.

Which browsers support CSS anchor positioning?

As of August 2026, CSS anchor positioning is supported in Chrome and Edge since version 125, Firefox since version 147, and Safari since version 26, covering roughly 84% of global browser usage according to caniuse. Older browser versions ignore the properties rather than throwing errors, so it degrades safely.

How do I enable CSS anchor positioning in Firefox?

You do not need to anymore. Firefox ships anchor positioning enabled by default starting with Firefox 147. On Firefox 145 and 146 it existed but was disabled by default, and could be turned on by setting layout.css.anchor-positioning.enabled to true in about:config. Current Firefox releases need no flag.

Do I need a polyfill for CSS anchor positioning?

Only if you need to support the remaining older Safari and Firefox versions. Oddbird maintains the @oddbird/css-anchor-positioning polyfill, which adds roughly 8 to 10KB and reimplements the behavior in JavaScript. For many projects, wrapping the anchor positioned styles in an @supports block and providing a simpler static fallback is lighter than shipping a polyfill.

What does position-area do?

position-area places the positioned element on one of nine tiles of an implicit 3x3 grid around the anchor, with the anchor itself in the center tile. A single keyword like top centers the element on that side, and combining two keywords like top left pins it to a corner. It replaces the earlier inset-area property, which some Chromium versions still accept as an alias.

What does anchor-center do?

anchor-center is a value for justify-self, align-self, justify-items, and align-items that centers a positioned element on the anchor's axis when you are positioning manually with inset properties and the anchor() function rather than with position-area. It replaces a longer calc() workaround that was previously needed to center an element relative to its anchor.

How do position-try-fallbacks work?

When an anchor-positioned element would overflow its containing block in its default position, position-try-fallbacks provides a list of alternative positions the browser tries in order until one fits. The built-in flip-block, flip-inline, and flip-start keywords mirror the element across the block axis, the inline axis, or diagonally. You can also list position-area values directly or reference a custom @position-try rule.

Can I build a tooltip with CSS anchor positioning instead of JavaScript?

Yes, this is the primary use case anchor positioning was designed for. Set anchor-name on the trigger element, position-anchor and position-area on the tooltip, and add position-try-fallbacks so it flips to the opposite side automatically when it would otherwise run off screen. This replaces the core placement logic that JavaScript libraries like Floating UI and Popper.js provide.

Does CSS anchor positioning work with the popover attribute?

Yes, and the two pair naturally. When a popover is opened declaratively with popovertarget or commandfor, the trigger button automatically becomes its implicit anchor, so anchor-name and position-anchor are not required. You still have to write the positioning CSS yourself, such as position-area, or the popover simply centers in the viewport by default.

How is CSS anchor positioning different from position: absolute?

position: absolute alone positions an element relative to its nearest positioned ancestor in the DOM tree, so the positioned element usually has to live near what it points at in the markup. Anchor positioning removes that DOM coupling: the positioned element can live anywhere in the document and still be tethered to a specific anchor purely through the anchor-name and position-anchor properties.

Can I use CSS anchor positioning with Tailwind CSS?

Tailwind does not ship built-in utility classes for anchor positioning as of Tailwind CSS v4, since custom-ident anchor names like --my-anchor do not map cleanly onto Tailwind's utility syntax. The CSS this playground generates can be added as a small custom CSS block, or applied per element with Tailwind's arbitrary property syntax, for example [anchor-name:--my-anchor] on the trigger element.