CSS Anchor Positioning Polyfill

Placing elements with position-area

The position-area property places an element in relation to its anchor, using 1 or 2 keywords to define the position on each axis.

In browsers that support position-area, this creates a new containing block for the positioned element based on the position of the anchor. The polyfill achieves this by wrapping the positioned element in a <POLYFILL-POSITION-AREA> element. Be aware that this may impact selectors that target the positioned element using direct child or sibling selectors.

This approach also causes some differences with content that is shifted to stay within its containing block in supporting browsers.

Note: We strive to keep the polyfill up-to-date with ongoing changes to the spec, and we welcome code contributions and financial support to make that happen.

bottom center ✅

Anchor
Target

span-left top ✅

Anchor
Target with longer content

center left ✅

Anchor
Target

inline-start block-end ✅

Anchor
Target

start end ✅

Anchor
Target

end ✅

Anchor
Target

no space around anchor, end start ✅

Anchor
Target

no block space around anchor, span-all top ✅

Anchor
Target with longer content that might line wrap

inline styles ✅

Anchor
Target

One declaration, different containing blocks ✅

Anchor
Target
Anchor
Target

Anchor inset values need to be different for each element matching a declaration, as their values depend on their containing blocks. Should be `right bottom`.

cascade should be respected ✅

Anchor
Target

Should be right top. Also has right bottom applied, with less specificity. When the cascaded value changes, the positioned element will only update to reflect the changes the next time the polyfill recalculates the positions, for instance, on scroll.

Logical properties and writing mode support

Anchor
vertical-rl rtl
Anchor
vertical-rl ltr
Anchor
vertical-lr rtl
Anchor
vertical-lr ltr
Anchor
sideways-rl rtl
Anchor
sideways-rl ltr
Anchor
sideways-lr rtl
Anchor
sideways-lr ltr

Logical properties and writing mode support for self

Anchor
vertical-rl rtl
Anchor
vertical-rl ltr
Anchor
vertical-lr rtl
Anchor
vertical-lr ltr
Anchor
sideways-rl rtl
Anchor
sideways-rl ltr
Anchor
sideways-lr rtl
Anchor
sideways-lr ltr

no block space around anchor, span-all left ❓

Anchor
Target with longer content that might line wrap

If the target overflows the containing block, and the target is shifted to the start of the containing block in browsers that support CSS anchor positioning, you can approximate the same behavior by adding an inline style to add safe overflow alignment for the impacted axis. There is not a similar solution for content that supporting browsers shift to the end of the containing block.

style="align-self: var(--position-area-align-self) safe"

Shifting content to stay inside containing block ❌

start
Target
center
Target
end
Target

Targets should get shifted to stay within the containing block.

span-all positioned correctly on non-centered anchors ❌

start
Target

Should be positioned on anchor-center, not center.