No Login Data Private Local Save

CSS Anchor Positioning Demo - Online Popover to Anchor

21
0
0
0

CSS Anchor Positioning Demo

Drag the anchor • Choose a position • See real-time CSS code

Drag the circle
💡 Popover Content

This popover is anchored to the target using CSS Anchor Positioning.

Drag the blue circle to move the anchor • Click it to toggle the popover
Position Controls
Generated CSS Code
CSS Anchor Positioning (Chrome 125+)
Frequently Asked Questions

CSS Anchor Positioning is a modern CSS feature that allows you to position an element (a "popover" or "target") relative to another element (the "anchor"), regardless of their DOM hierarchy. It uses properties like anchor-name, position-anchor, and position-area to create flexible, responsive positioning without JavaScript. This is especially useful for tooltips, dropdowns, popovers, and context menus.

As of 2024, CSS Anchor Positioning is supported in Chrome 125+ Edge 125+. It is currently behind a flag in some versions. Firefox and Safari are working on implementation. You can use @supports (anchor-name: --test) for feature detection and provide JavaScript fallbacks for unsupported browsers.

The anchor-name property assigns a custom identifier (dashed ident) to an element, making it available as an anchor. For example: anchor-name: --my-anchor;. Then, any positioned element can reference this anchor using position-anchor: --my-anchor; and use anchor() or anchor-size() functions to calculate positions and dimensions relative to that anchor.

position-area (previously known as inset-area) is a shorthand that quickly places a popover relative to its anchor. You can use values like top, bottom, left, right, and combinations like top span-left or bottom span-right. It automatically calculates the optimal position, making it much simpler than manually setting top, left, right, and bottom with anchor() functions.

The anchor() function lets you reference specific edges or dimensions of an anchor element. For example: top: anchor(--my-anchor bottom) places the popover's top edge at the anchor's bottom edge. You can reference top, bottom, left, right, center, or percentage values. There's also anchor-size() for referencing the anchor's width or height.

Traditional positioning requires the popover to be a child of the anchor (for position: relative/absolute) or requires JavaScript to calculate positions. CSS Anchor Positioning allows cross-DOM positioning — the popover can be anywhere in the DOM tree. It also handles edge cases automatically with position-try-options, provides scroll-aware positioning, and is more performant since it runs natively in the browser's layout engine.

Yes! The HTML popover attribute and Popover API pair perfectly with CSS Anchor Positioning. You can use popover for semantic popover behavior (light-dismiss, focus management) and CSS Anchor Positioning for precise visual placement. This combination creates accessible, well-positioned popovers with minimal code. Simply add popover="auto" to your popover element and use anchor positioning CSS to control its placement.
🔧 Related Tools