jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

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+.

Quick answer

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.

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.

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.

Related tools

More css tools

Also try

Also try