Post

Chris Pennington

@codinginpublic.dev

How do anchors work in modern CSS? The Anchor Positioning API is deceptively complex. Here's everything you need to know in <8 min 👇 youtu.be/zfQbVHyv3v4

youtube.comHow Anchors work in Modern CSSPosition elements relative to each other using just HTML and CSS, n...

Chris Pennington

@codinginpublic.dev

1️⃣ Structure At the most basic, you need two elements: an anchor and a target.

Chris Pennington

@codinginpublic.dev

2️⃣ Anchor name In your CSS, give the anchor an "anchor-name", which is a name proceeded with a double dash.

14/7/26, 1:02 pm0 reposts0 likes

Chris Pennington

@codinginpublic.dev

3️⃣ Target properties The target must be either position absolute or fixed. Then assign it's position-anchor and set it's relative position-area.

Chris Pennington

@codinginpublic.dev

The position-area is a quadrant with the anchor in the middle. You can use directional (e.g., left, top) or logical properties (e.g., block-start).

Chris Pennington

@codinginpublic.dev

There are lots of extra little details in the API, like position-try-fallbacks for adjusting the position based on whether or not the target can fit, using it with the popover API, etc. All the details are in the video 👇 youtu.be/zfQbVHyv3v4

youtube.comHow Anchors work in Modern CSSPosition elements relative to each other using just HTML and CSS, n...