CSS Anchor Positioning Generator
Generate CSS anchor positioning rules to place tooltips, popovers, and dropdowns relative to anchor elements — no JavaScript required.
How to Use the CSS Anchor Positioning Generator
1
Define the Anchor
Choose an anchor name (a dashed ident like --my-anchor) and set the block/inline position where the target should appear relative to the anchor.
2
Add Fallbacks
Enable position-fallback to define alternative positions. The browser tries each fallback in order and uses the first one that fits in the viewport — essential for responsive tooltips.
3
Copy & Apply
Copy the generated CSS. Add anchor-name to your anchor element and the positioned class to the target. The browser handles all scroll, resize, and viewport boundary logic automatically.
Anchor Positioning Reference
| Property | Description | Example |
|---|---|---|
| anchor-name | Assigns an anchor name to an element | anchor-name: --my-anchor; |
| position-anchor | References the anchor element | position-anchor: --my-anchor; |
| position-area | Block and inline position relative to anchor | position-area: top center; |
| position-fallback | Fallback positions if preferred doesn't fit | position-fallback: --fallback-tooltip; |
| anchor-size() | Reference anchor dimensions in CSS | width: anchor-size(--my-anchor width); |
Frequently Asked Questions
CSS Anchor Positioning is a specification that lets you position elements relative to other elements (anchors) on the page. Instead of using JavaScript to calculate position on scroll/resize, you use CSS properties like anchor-name, position-anchor, and position-area to declare the relationship.
First, give the anchor element an anchor-name (e.g., anchor-name: --tooltip-trigger). Then, on the positioned element, set position-anchor: --tooltip-trigger and position-area: top center to place it above the anchor. The browser automatically handles scrolling and resizing.
position-area is a shorthand that specifies where the positioned element should appear relative to its anchor. It takes two keywords: the block direction (top, bottom, start, end, center, y-start, y-end) and the inline direction (left, right, start, end, center, x-start, x-end).
position-fallback lets you define alternative positions that the browser will try if the preferred position doesn't fit in the viewport. You define a @position-fallback at-rule listing multiple position-area values. The browser tries each in order and uses the first one that fits.
CSS Anchor Positioning is supported in Chrome 125+, Edge 125+, and Chromium-based browsers. Safari and Firefox have the feature in development. For production, pair with a JavaScript polyfill or use feature detection with @supports (anchor-name: --x).
Ad