CSS Anchor Positioning Polyfill

Anchoring Elements Using CSS

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 left βœ…

Anchor
Target with longer content that might line wrap

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`.

Shifting content to stay inside containing block ❌

start
Target
center
Target
end
Target

Things 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.

cascade should be respected ❌

start
Target

Should be right top.