The CSS Anchor Positioning API For Web Developers.

Traditional CSS positioning methods, such as absolute and fixed, have limitations when it comes to creating layouts that respond fluidly to content changes and viewport adjustments. The CSS Anchor Positioning API addresses these challenges by allowing elements to be anchored to other elements, enabling more intuitive and maintainable designs.

Core Concepts

1. Anchor Elements

An anchor element serves as the reference point for positioning another element. This association is established using the anchor-name property on the anchor element and the position-anchor property on the positioned element.

Example:

<div class="anchor" anchor-name="--myAnchor">Anchor Element</div>
<div class="positioned" position-anchor="--myAnchor">Positioned Element</div>

In this example, the .positioned element will be positioned relative to the .anchor element.

2. The anchor() Function

The anchor() function computes a length value based on the position of the anchor element. This value can be used in inset properties to position the anchored element.

Example:

.positioned {
  inset-block-start: anchor(start);
  inset-inline-start: anchor(end);
}

Here, the .positioned element is placed at the start of the anchor's block axis and the end of its inline axis.