Anchor Positioning with Scrolling Containers

The Default Behavior

When you scroll a container, an anchor inside that container moves with the content. By default, the anchored target moves with the anchor — it tracks the anchor's resolved position frame by frame. No JavaScript needed.

.scroll-container {
  height: 400px;
  overflow-y: auto;
}

.scroll-container .item {
  anchor-name: --item;
}

.tooltip {
  position: absolute;
  position-anchor: --item;
  position-area: top;
}

The tooltip stays glued to the item even as the user scrolls. This is the killer feature versus the JavaScript libraries it replaces — Floating UI and Popper need to listen to scroll events on every ancestor and recompute, which has a measurable cost on long pages. Anchor positioning is built into the layout engine.

When the target should escape the scroll container

Sometimes you want a tooltip that appears anchored to a row inside a scrollable table but stays visible even when the row scrolls offscreen. Use position: fixed on the target instead of absolute:

.tooltip {
  position: fixed;        /* escape any overflow ancestor */
  position-anchor: --item;
  position-area: top;
}

Now the tooltip is positioned in the viewport coordinate system, but it still tracks the anchor's resolved position. When the anchor scrolls offscreen, the tooltip stays at the last visible spot near the viewport edge — or you can pair this with an IntersectionObserver to hide the tooltip when the anchor leaves the viewport.

Sticky positioning

position: sticky does not work well with anchor positioning today (March 2026). The two systems compute positions in different ways and the interaction is unspecified. If you need sticky behavior, position the anchor with sticky and the target with absolute — but expect quirks. Track CSSWG issue 9852 for progress.

Performance

Anchor positioning re-evaluates on every scroll frame, which is what you want — but the cost is built into layout, not into a JavaScript event handler. A page with 100 anchor-positioned tooltips inside a fast-scrolling container costs less than the same page with 100 Floating UI-managed tooltips.