v133 · dom

Overflow Escape Demo

A key benefit of anchor-positioned popovers: they live in the top layer, so they escape overflow: hidden containers. Compare the old clipped tooltip vs the new popover that renders outside the overflow boundary.

checking Popover API… checking CSS Anchor Positioning…

Both demos below have a button inside an overflow: hidden box. The old approach clips the tooltip. The anchor-positioned popover escapes the clip because it renders in the top layer.

Old approach clipped

Position: absolute tooltip, clipped by overflow:hidden.

overflow: hidden

The tooltip renders above the button but is cut by the box boundary.

Anchor-positioned popover Chrome 133

Uses popovertarget + position-anchor. Renders in top layer.

overflow: hidden

I escaped the overflow box!
Top layer — no clipping.

The popover renders below the button, outside the overflow boundary.

Horizontally scrolled container

Scroll right to find the item with the popover button. The popover still positions correctly even after horizontal scrolling — because it tracks the anchor element, not a fixed offset.

How it works

/* Invoker button — implicit anchor for its popover */
button {
  anchor-name: --my-anchor;  /* explicit, or implicit via popovertarget */
}

/* Popover positions relative to its invoker anchor */
[popover] {
  position: absolute;
  position-anchor: --my-anchor;
  top: anchor(bottom);       /* below the button */
  left: anchor(left);        /* left-aligned */
}

/* Result: renders in the top layer — escapes overflow, z-index stacks */