Modern CSS is so great, and anchor positioning is one of my favorite new features. It's great for tooltips and popovers, but also for a lot of other things that used to be a lot more difficult, like positioning an element relative to a sibling or other ancestor that can't be it's containing block.

#css

Kevin Powell

CSS anchor positioning allows you to position elements relative to other elements in the DOM, even when they're not parent-child related. By using `anchor-name` on a target element and `position-anchor` with `anchor()` functions on the positioned element, you can avoid magic numbers and create responsive layouts that adapt to changing element sizes. This is particularly useful for positioning badges or overlays relative to images without relying on fixed pixel values.

No more magic numbers with this modern CSS feature