If you've ever tried to position a tooltip exactly above another DOM element, you probably remember the hoops you had to jump through. Between position: static, nesting elements, and adjusting with JavaScript to handle scroll, zoom, and resize — it was never clean or simple.

💡 Enter CSS Anchor Positioning — a new set of CSS properties designed to solve those layout headaches. You can now directly link a floating element (like a tooltip or dropdown) to its anchor using pure CSS.

New CSS Properties Include:

• anchor-name
• position-anchor
• position-area
• position-try-fallbacks
• position-try-order
• position-try (shorthand)
• position-visibility
• anchor-scope (not yet implemented)

Quick Example:

.anchor {
  anchor-name: --some-name;
}

.target {
  position: absolute;
  position-anchor: --some-name;
}

📌 Note: Browser support is still evolving — but it's improving rapidly.

Learn More:

• Mozilla Developer Docs
• CSS-Tricks article
• Kevin Powell's video