CSS Anchor Positioning Polyfill

  

- Demo
- Draft Spec

The CSS anchor positioning
specification defines anchor
positioning, "where a positioned element can size and position itself relative
to one or more 'anchor elements' elsewhere on the page." This CSS Anchor
Positioning Polyfill supports and is based on this specification.

Browser Support

- Firefox 54+ (includes Android)
- Chrome 51 - 124 (includes Android)
- Edge 79 - 124
- Safari 10+ (includes iOS)

Anchor positioning was added to Chrome, Chrome Android, and Edge in Chromium
125, so the polyfill will not be applied to versions after 124. Some aspects of
anchor positioning were shipped later in Chromium, meaning that they are not
polyfilled and are not present in those versions.

- position-try-fallbacks was added in 128 after being renamed from
position-try-order. Use both -fallbacks and -order or the position-try
shorthand to make sure all versions are covered.
- position-area was added in 129.
- anchor-scope was added in 131.

Getting Started

To use the polyfill, add this script tag to your document :

``js

`

If you want to manually apply the polyfill, you can instead import the
polyfill function directly from the
@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js file.

For build tools such as Vite, Webpack, and Parcel, that will look like this:

`js
import polyfill from '@oddbird/css-anchor-positioning/fn';
`

The polyfill function returns a promise that resolves when the polyfill has
been applied.

You can view a more complete demo
here.

Configuration

The polyfill supports a small number of options. When using the default version
of the polyfill that executes automatically, options can be set by setting the
value of window.ANCHOR_POSITIONING_POLYFILL_OPTIONS.

`js

`

When manually applying the polyfill, options can be set by passing an object as
an argument.

`js

`

$3

type: HTMLElements[], default: undefined

If set, the polyfill will only be applied to the specified elements instead of
to all styles. Any specified and