Anchor positioning allows a positioned element to size and position itself relative to one or more "anchor elements" elsewhere on the page, possibly constrained by the container or viewport. A typical use case is to "pin" a popup to the button that opens it.

Motivation

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.

Specification

Specification link


Proposal in a personal repository, no adoption from community

Status in Chromium

Blink>Layout


Proposed (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • No signal
  • No signals

Owners

Intent to Prototype url

Intent to Prototype thread

Search tags

css, anchor, position,

Last updated on 2022-05-15