# CSS Anchor Positioning: Simplify Dynamic UI Layouts

URL: https://theosoti.com/short/css-anchor-positioning/
Published: 2025-03-10
Author: Theo Soti

> Learn how CSS Anchor Positioning makes UI layout easier by allowing elements to be positioned dynamically—no more complex JS or layout shifts!

<video controls class="video">
  <source src="/short/03-2025/CSS-anchors.mp4" type="video/mp4" />
</video>

## 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!

```html
<div class="container">
  <button class="anchor-button">Anchor</button>
  <div class="notice">I'm a great notice!</div>
</div>
```

```css
.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!