Behind the Framework

CSS Anchor Positioning

The CSS anchor positioning API provides a powerful way to tether an element (like a popover) to another (the anchor) and define a set of position-try-fallbacks used if the element runs out of room. For example, if your anchored element is initially styled to be on the top, but as you scroll and it hits the edge of the screen, the browser can handle the "flipping" to keep it in the viewport.