Getting Started with Anchor Positioning

A common UI pattern on the web is having one element stick to another. Tooltips need to float above their targets, dropdown menus need to drop down from their triggers.

It seems pretty straightforward, but the devil is in the details. We might want our tooltip to float above its target, but if that target happens to be right at the top of the viewport, it’ll overflow:

Historically, we’ve used JavaScript to solve these sorts of problems, and the code that manages this stuff can get pretty hairy. Fortunately, a shiny new browser API handles all of the tough stuff for us: the Anchor Positioning API.

I’m still learning about this new API myself, and truthfully, I felt a bit overwhelmed by all of the options at first. The underlying problem space is complex, and the Anchor Positioning API is designed to solve a wide range of problems. I think the Pareto principle?The 80/20 rule: 80% of outputs come from 20% of inputs. In this case, I think ~20% of the Anchor Positioning API can solve ~80% of real-world use cases. applies here, and so in this post, we’re going to cover the most critical parts of this API so that you can start experimenting with it today!

Link to this headingAnchors and Targets

Let's start with a basic “Hello world” example:

<style>
  .anchor {
    anchor-name: --example-anchor;
  }
  .target {
    position: absolute;
    position-anchor: --example-anchor;
    position-area: top;
  }
</style>

<button class="anchor">
  Example button
</button>
<div class="target">
  This tooltip’s layout is calculated
  with the Anchor Positioning API!
</div>