jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free CSS Anchor Positioning Generator

Build anchor positioning CSS with anchor-name, position-anchor, and position-area. Create tooltips, dropdown menus, callouts, and popovers that align to their trigger element without JavaScript positioning libraries.

Loading tool...

What is CSS Anchor Positioning Generator?

CSS anchor positioning lets you tether one element to another using only CSS. You assign an anchor-name to the anchor element and use position-anchor on the positioned element. It eliminates the need for JavaScript positioning libraries for tooltips, dropdowns, and popovers. It is a new CSS feature supported in Chrome 125+.

quickAnswer

Anchor positioning lets you attach an element to another element on the page using CSS alone, without JavaScript. It replaces most manual position calculations for tooltips, popovers, and dropdown menus.

Last updated: 2026-05-25

limitations

  • Anchor positioning is only supported in Chrome 125+. Firefox and Safari do not yet support it as of early 2026.
  • The anchor element must be a DOM ancestor or referenced by anchor-name. Elements in different shadow roots may not work.
  • Fallback positioning with position-fallback is experimental and behavior varies across supported browsers.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Set an anchor name for the trigger element using the anchor-name property.
  2. Choose the positioning area for the anchored element relative to the trigger.
  3. The tool generates the CSS for both the anchor and the positioned element.
  4. Copy the CSS and pair it with your trigger and popover HTML.

What you can use it for

  • Position a tooltip that follows a button or link.
  • Create a dropdown menu aligned to its trigger element.
  • Build a callout that points to a specific UI element on the page.

Use cases

Practical examples

example

Button tooltip with anchor positioning

A tooltip appears above a button using position-area: top and position-anchor. The tooltip stays aligned to the button regardless of surrounding layout.

example

Nav dropdown menu

A dropdown menu anchors to the bottom of its nav trigger item, automatically following the trigger's position on the page.

Common mistakes

  • Not providing a fallback for browsers that do not support anchor positioning.
  • Using anchor positioning for content that must remain accessible when CSS is disabled.
  • Forgetting that the anchor and positioned element must be in the same containing block.

verification

  1. Test the positioned element in Chrome and verify it tracks the anchor element correctly on scroll and resize.
  2. Provide a JavaScript-based fallback for unsupported browsers, such as using getBoundingClientRect() to position the element.

FAQ

Questions about CSS Anchor Positioning Generator

Which browsers support anchor positioning?

Chrome 125+, Edge 125+. Safari and Firefox are developing support. Provide a fallback position for unsupported browsers.

Does anchor positioning work with the Popover API?

Yes. Popovers can use anchor positioning to align to their trigger element.

How do I define an anchor element for CSS anchor positioning?

Set the anchor-name CSS property on the anchor element: anchor-name: --my-anchor;. Then reference it on the positioned element with position-anchor: --my-anchor; and use anchor() functions for positioning: top: anchor(--my-anchor bottom);. The anchor element and the positioned element can be anywhere in the DOM, not necessarily siblings or parent-child.

What happens when the anchor element scrolls out of view?

By default, the positioned element follows the anchor and may also scroll out of view. To keep the positioned element visible within the viewport, combine anchor positioning with position: fixed or use the position-try-options property to specify fallback positions when the default position would place the element off-screen. The inset-area property also helps with automatic repositioning.

Related tools

More css tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool