Positioning UI elements just got easier.
Meet CSS Anchor Positioning!
Positioning elements dynamically has always been a hassle. Absolute positioning, JavaScript calculations, and unexpected layout shifts…
But the new Anchor Positioning makes everything better!
How does it work?
- Define an element as an anchor using
anchor-name - Then position another element relative to it with
anchor().
No more guesswork, just native, flexible, and precise positioning.
Some real-world use cases:
- Tooltips that stay perfectly attached to their trigger.
- Dropdown menus that align dynamically with their button.
- Modals or popovers that position relative to an element instead of the whole viewport.
- Notifications that stick near the related content.
What about browser support? Not great for now, with only a bit more than 71%. It doesn’t work on firefox and safari.
With features like this, CSS is proving once again that it’s becoming more powerful than ever!
<div class="container">
<button class="anchor-button">Anchor</button>
<div class="notice">I'm a great notice!</div>
</div>.anchor-button {
anchor-name: --anchor-el;
}
.notice {
position-anchor: --anchor-el;
position: absolute;
bottom: anchor(top);
justify-self: anchor-center;
margin: 0.5rem 0;
}You can find the codepen link here: https://codepen.io/theosoti/pen/JojyajY
Anchor positioning is great for tooltips, menus, and notices tied to a trigger. It reduces manual offset calculations and keeps overlay placement attached to the relevant UI element.
Layout features like this provide real value when components move between narrow and wide containers. Testing nested contexts early prevents brittle breakpoint rules.
For teams, anchor-name is easiest to maintain when it starts in one documented example before broader reuse. After validation, expand gradually to matching components and avoid ad-hoc one-off overrides.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!