Anchor Position Playground

Q: When will Firefox and Safari support this?

Firefox has it in development behind a flag. Safari has shown interest but no timeline yet. Use @supports for progressive enhancement.

Q: What's the fallback for older browsers?

Use position:absolute with manual top/left as fallback, or use a JS positioning library like Floating UI for browsers that don't support it yet.

Q: What is the difference between anchor positioning and position: absolute?

position: absolute positions an element relative to its nearest positioned ancestor. Anchor positioning positions an element relative to any named anchor element anywhere in the DOM, regardless of the DOM hierarchy.

Q: Can I use anchor positioning for responsive design?

Yes, anchor positioning includes @position-try rules that let you define fallback positions. If a tooltip would overflow the viewport on top, it can automatically flip to the bottom.

Q: Does anchor positioning replace JavaScript tooltip libraries?

For many use cases, yes. Anchor positioning handles the positioning logic that libraries like Floating UI and Popper.js provide, but with pure CSS. Complex behaviors like virtual anchors or arrow positioning may still need JavaScript.

CSS Anchor Positioning is the spec that lets you position one element relative to another — without JavaScript. Before this, every tooltip and popover library had to reimplement collision detection and positioning math. Now you can write position-anchor: --my-button and the browser handles it. Currently supported in Chrome 125+ (with broader support coming). This playground lets you experiment with the syntax and see live results.

Position Offset (8px)

Anchor

Direct CSS

CSS Variables

What is anchor positioning?

CSS Anchor Positioning is a new specification that lets you tether one element to another purely with CSS declarations. It replaces the JavaScript-based positioning logic that every tooltip library, dropdown menu, and popover component has had to reimplement for years. Instead of calculating coordinates in a resize observer or scroll handler, you declare anchor-name on a reference element and position-anchor on the positioned element, and the browser does the rest — including collision detection with position-try-fallbacks.

The core concept is simple: an anchor is any element with a declared anchor-name (a dashed-ident like --my-button). A positioned element references this anchor with position-anchor: --my-button and then uses anchor functions like anchor(top), anchor(bottom), anchor(left), and anchor(right) in its inset properties to attach itself to specific edges of the anchor. The browser automatically computes the correct coordinates, even as the anchor moves due to scrolling or layout changes.

One of the most powerful features of anchor positioning is automatic fallback positioning through position-try-fallbacks and the @position-try at-rule. You can define a preferred position (for example, above the anchor) and a list of fallback positions (below, left, right). If the element would overflow the viewport in its preferred position, the browser automatically tries the fallbacks in order until it finds one that fits. This collision detection, which previously required complex JavaScript, is now declarative CSS.

How to use this tool

Select a position from the dropdown to place the tooltip above, below, to the left, or to the right of the anchor element. Adjust the offset slider to control the gap between the anchor and the tooltip, from 0 to 32 pixels. Drag the anchor element around the preview area to see the tooltip follow it in real time — this demonstrates how anchor positioning keeps the tooltip tethered regardless of where the anchor is placed.

The generated CSS code updates live in the output panels below the preview. The "Direct CSS" output gives you the complete anchor-name and positioning declarations ready to paste into your stylesheet. The "CSS Variables" version wraps configurable values in custom properties so you can easily adjust positioning from a higher scope. Use the share URL button to bookmark your configuration or share it with a colleague.

Practical examples

Tooltip positioned relative to a button

The most common use case for anchor positioning: a tooltip that appears above a button on hover. The tooltip automatically positions itself relative to the button's edges, and the position-try-fallbacks property ensures it flips to the bottom if there is not enough room above.

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

.tooltip {
  position: fixed;
  position-anchor: --trigger;

  /* Position above the anchor, centered horizontally */
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;

  margin-bottom: 8px;

  /* Flip to bottom if no room above */
  position-try-fallbacks: flip-block;

  /* Styling */
  background: #1e293b;
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
}

Dropdown menu anchored to a trigger

A dropdown menu that opens directly below a navigation button. The menu aligns its top-left corner to the bottom-left corner of the trigger. If the dropdown would overflow the viewport at the bottom, it flips to open upward instead.

.nav-button {
  anchor-name: --nav-trigger;
}

.dropdown-menu {
  position: fixed;
  position-anchor: --nav-trigger;

  /* Attach top of menu to bottom of trigger */
  top: anchor(bottom);
  left: anchor(left);

  margin-top: 4px;

  /* Flip upward if no room below */
  position-try-fallbacks: flip-block;

  /* Styling */
  min-width: 200px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
}

Floating label attached to a form field

A floating label that sits at the top-left corner of a form input. Using anchor positioning, the label tracks the input even if the form layout changes, without the brittle absolute positioning that typically requires a positioned parent wrapper.

.text-input {
  anchor-name: --field;
}

.floating-label {
  position: fixed;
  position-anchor: --field;

  /* Position at top-left of the input, offset upward */
  bottom: anchor(top);
  left: anchor(left);

  translate: 0 50%;
  margin-left: 12px;

  /* Styling */
  background: #fff;
  padding: 0 4px;
  font-size: 0.75rem;
  color: #6366f1;
  font-weight: 500;
}

Common patterns and best practices

Anchor positioning is a new and evolving feature. These best practices will help you use it effectively.

Use position: fixed for anchored elements. Anchored elements should typically use position: fixed so they are positioned relative to the viewport and can reference any anchor regardless of DOM structure. position: absolute also works but limits the anchor to within the containing block.
Always provide fallback positions. Use position-try-fallbacks: flip-block (vertical flip), flip-inline (horizontal flip), or flip-block flip-inline (both) to handle edge-of-viewport scenarios automatically.
Use the anchor-center value for centering. Instead of manually calculating center alignment with anchor(center) and translate: -50%, you can use justify-self: anchor-center or align-self: anchor-center to center the positioned element on the anchor's axis.
Keep anchor names unique. Each anchor-name must be unique on the page. If two elements share the same anchor name, the last one in DOM order wins, which can cause unpredictable behavior.
Use @supports for progressive enhancement. Wrap anchor positioning styles in @supports (anchor-name: --test) and provide a traditional position: absolute fallback for browsers that do not yet support the feature.
Consider accessibility. Anchor-positioned elements like tooltips and dropdowns should still follow accessibility best practices: use appropriate ARIA roles, manage focus for interactive elements, and ensure keyboard users can access the content.

Browser support

CSS Anchor Positioning is supported in Chrome 125+ (May 2024) and Edge 125+. Firefox has the feature in development behind the layout.css.anchor-positioning.enabled flag. Safari has expressed interest in the specification but has not yet announced a shipping timeline. For production use, wrap anchor positioning styles in @supports (anchor-name: --test) and provide a fallback using traditional position: absolute with manual offsets. Alternatively, use a JavaScript positioning library like Floating UI as a polyfill for unsupported browsers. As browser support expands, you can progressively remove the JavaScript fallback.

FAQ

When will Firefox and Safari support this?

Firefox has anchor positioning in development behind a flag (layout.css.anchor-positioning.enabled). Safari has shown interest in the specification but has not announced a public timeline yet. Both browsers are actively tracking the CSS Anchor Positioning specification. For now, use @supports (anchor-name: --test) for progressive enhancement and provide a position: absolute fallback for unsupported browsers.

What's the fallback for older browsers?

Use position: absolute with manual top/left values as a CSS-only fallback, positioning the element relative to a parent wrapper. For dynamic positioning that handles scrolling and resizing, use a JavaScript positioning library like Floating UI (the successor to Popper.js). You can load the JavaScript library conditionally using @supports checks so that browsers with native anchor positioning skip the library entirely.

What is the difference between anchor positioning and position: absolute?

position: absolute positions an element relative to its nearest positioned ancestor (an element with position: relative, absolute, or fixed). This means the positioned element and its reference point must be in a parent-child DOM relationship. Anchor positioning, by contrast, positions an element relative to any named anchor element anywhere in the DOM, regardless of the DOM hierarchy. A tooltip in the document footer can anchor itself to a button in the header — something impossible with position: absolute alone.

Can I use anchor positioning for responsive design?

Yes, anchor positioning includes @position-try rules and the position-try-fallbacks property that let you define fallback positions. If a tooltip would overflow the viewport when positioned on top of the anchor, the browser automatically tries alternative positions — such as flipping to the bottom, left, or right — until it finds one that fits. You can define custom fallback sets using @position-try blocks with entirely different positioning logic for each fallback.

Does anchor positioning replace JavaScript tooltip libraries?

For many use cases, yes. Anchor positioning handles the core positioning logic that libraries like Floating UI and Popper.js provide — tethering an element to another and flipping it when it hits the viewport edge — but with pure CSS and no runtime JavaScript cost. However, complex behaviors like virtual anchors (positioning relative to a cursor or selection range), arrow elements that track the anchor's edge, and rich animation sequences during show/hide may still benefit from JavaScript. Over time, as the specification matures and browser support broadens, the need for JavaScript positioning libraries will decrease significantly.