Post

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

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

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

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.

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