> Markdown version of [/magazine/714-tether-elements-without-javascript-with-css-anchor-positioning](https://www.wearedevelopers.com/magazine/714-tether-elements-without-javascript-with-css-anchor-positioning). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Tether Elements Without JavaScript with CSS Anchor Positioning

**By:** [Daniel Cranney](https://www.wearedevelopers.com/@daniel-cranney)

**Published:** March 25, 2026

Considering how powerful CSS is, positioning elements relative to other ones for components like tooltips has often involved JavaScript along the way, revealing a weakness in the CSS spec.

Well, baseline since 2026, CSS anchor positioning makes it much staight-forward to handle, so we thought we would show you how.

You can see how positioning works on our CodePen demo, clicking the button to change values on the elements.

## The Anchor Name

First of all, it’s important to declare one element as an **anchor** using `anchor-name`, so we create one called `--box` like so:

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

Then, we tether our _floating_ element to the anchored `--box` with `position-anchor`, and finally `position-area` defines where the floating element should appear:

    .positioned {
      position: absolute;
      position-anchor: --box;
      position-area: right center;
    }

It’s worth saying, the anchor and floating element _do not_ need the same parent, so you’re free to put them anywhere in the DOM and so long as they share a `anchor-name` and `positioned-anchor`, it’ll work.

## How `position-area` Works

So, `position-area` uses a 3×3 grid metaphor to describe where you want the positioned element to sit relative to its anchor. Values like `top center`, `bottom center`, `left center`, `right center`, and combinations of these cover most use cases.

In our demo, we’ve cheated and added a little JavaScript, just to show the results of different `position-area` values, though of course you would just use these values in the CSS itself.

## Handling Fallbacks with `position-try-fallbacks`

One of the most useful parts of anchor positioning is the built-in overflow handling. If a positioned element would go off-screen with chosen positioning, you can declare fallback positions and the browser tries them in order:

    .positioned {
      position: absolute;
      position-anchor: --box;
      position-area: bottom center;
      position-try-fallbacks:
        top center,
        left center,
        right center;
    }

* * *

And that’s it! We hope you found this article useful, and find some great uses for these CSS anchor positioning tips.



## Related Articles

- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [Links and anchors: ancient HTML and JS magic in your browser](https://www.wearedevelopers.com/magazine/643-links-and-anchors-ancient-html-and-js-magic-in-your-browser)
- [Tips and Tricks: CSS Pseudo Elements and Pseudo Selectors](https://www.wearedevelopers.com/magazine/510-tips-and-tricks-css-pseudo-elements-and-pseudo-selectors)
- [Creating a Spotlight Text Effect with CSS and JavaScript](https://www.wearedevelopers.com/magazine/637-creating-a-spotlight-text-effect-with-css-and-javascript)

## Related Videos

- [Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements](https://www.wearedevelopers.com/videos/1247-tips-and-tricks-css-pseudo-class-selectors-and-pseudo-elements)
- [What’s New and What’s Next in Web UI](https://www.wearedevelopers.com/videos/956-what-s-new-and-what-s-next-in-web-ui)
- [Can CSS recreate Tufte's designs?](https://www.wearedevelopers.com/videos/517-can-css-recreate-tufte-s-designs)
- [One Color to Rule Them All: Relative CSS Colors in Practice](https://www.wearedevelopers.com/videos/100016-one-color-to-rule-them-all-relative-css-colors-in-practice)

## Related Jobs

- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**