CSS anchor positioning allows authors to "tether" an absolutely positioned element to one or more other elements on the page (the "anchors"), in a declarative way, without the use of Javascript. Anchor positioning works performantly when the anchors are scrollable. A common use case is to position a popover such as a tooltip next to the element that invoked it, or a select menu and its popover options list. Before the anchor positioning feature, these use cases required Javascript to dynamically position the popover, and keep it anchored as the invoking element was scrolled, which is a performance footgun and difficult to get right. With anchor positioning, these use cases can be implemented performantly and declaratively. The anchor positioning feature consists of a large number of CSS properties, which are fully described in the spec (https://drafts.csswg.org/css-anchor-position-1). A few of the key features/properties include: - `anchor-name`: sets up an element to be an anchor for other elements. - `position-anchor`: describes the "default" anchor that an anchored element should use for anchor positioning. - The `anchor()` function: used to refer to the position of the anchor element, in positioning the anchored element. - `inset-area`: a shorthand for positioning, for common relative positions. ...and many more.
When building interactive components or applications, authors frequently want to leverage UI elements that can render in a "top-layer", and wish to "pin" or "anchor" such top-layer UI to a point on another element, referred to here as an "anchor element". How the top-layer UI is positioned with respect to its anchor element is further influenced or constrained by the edges of the container. CSS Anchor Positioning provides native support for such use cases.
Samples: https://anchor-tool.com
Explainers: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md https://xiaochengh.github.io/Explainers/css-anchor-position/explainer.html https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning https://12daysofweb.dev/2023/anchor-positioning