Anchor Positioning: attach overlays to an element without JS geometry

Learn how to use `anchor-name`, `position-anchor` and `anchor()` to place tooltips, popovers and contextual UI around another element with much less manual glue.

How much do you know about CSS?

📘 Theory

The core idea: declare an anchor and consume it

Think less in absolute pixels and more in relationships between elements.

With `anchor-name` you name the reference element. With `position-anchor` you tell the overlay which anchor to follow. And with functions like `anchor(bottom)` or `anchor(center)` you request coordinates derived from that relationship.

This is especially useful for tooltips, form help, contextual popovers and menus that should keep following a trigger even when the layout changes.

Minimal tooltip pattern

The classic example is enough to internalize the syntax.

Where it helps more than relative and absolute

It does not replace every positioning technique, but it does reduce the fragile ones.

Tooltips and help UI

The visual relationship already exists: the content should appear next to the element that invoked it.

Small popovers

Filter states, contextual information or quick confirmations get cleaner without manual coordinate math.

Reusable components

The positioning logic depends less on the surrounding page and lives more naturally inside the component itself.

Fallback and progressive enhancement

The important lesson here is not “use the new thing”, but “do not tie the UI to perfect support”.

If the overlay is secondary, you can leave it without the enhancement or show it in a simpler default position. If it is critical, prepare a fallback with `relative + absolute` or a small JavaScript measurement step.

The professional move is not to duplicate the whole interface out of excitement. Solve the robust version first, then let modern browsers simplify the path.

1 The core idea: declare an anchor and consume it 2 Minimal tooltip pattern 3 Where it helps more than relative and absolute 4 Fallback and progressive enhancement

🧪 Learn by doing

Example Interactive demo: native tooltip and contextual popover See how the overlay follows the trigger with native support and how the approach changes when the browser needs a fallback.

⌄

🏁 Challenges

Challenge Challenge: attach a tooltip to the right button Declare an anchor name, use it in the tooltip and place the tooltip below the trigger.

⌄

🧰 Resources

Useful links

MDN - CSS anchor positioning MDN - anchor()

Test

Check your knowledge with a test about CSS.

Test for CSS

Course resources 78

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 39

Modern positioning and interaction

Lesson 41

Media queries and responsive design

›