A GENTLE INTRODUCTION TO ANCHOR POSITIONING

Summary from the TLDR Web Dev newsletter

Anchor positioning is a new CSS feature that allows devs to position an element (the target) relative to another element (the anchor) without relying on JavaScript. This happens by naming an anchor element with `anchor-name` and then referencing it on the target element using `position-anchor`. The target can then be positioned using either `position-area`, which places the element on a nine-square grid relative to the anchor, or the `anchor()` function, which aligns the target's edges with the anchor's edges using inset properties.