CSS position-area: Simplifying Anchor Placement

The CSS position-area property revolutionizes CSS Anchor Positioning by replacing verbose inset mathematics and alignment declarations with an intuitive, 3x3 directional grid model. This article explores how position-area functions, breaks down its directional grid concepts, and demonstrates how it drastically reduces the code needed to align anchored elements such as tooltips, popovers, and dropdown menus.

The 3x3 Anchor Grid Model

At the core of position-area (formerly developed under the working name inset-area) is an implicit 3x3 grid drawn around the anchor element:

• Rows: Defined as top, center, and bottom (or logically as block-start, center, and block-end).
• Columns: Defined as left, center, and right (or logically as inline-start, center, and inline-end).

The anchor element itself occupies the center cell of this grid. The remaining eight surrounding cells correspond to the areas immediately adjacent to the anchor. By referencing these cells using directional keywords, the browser automatically handles dimensions, positioning, and alignment without requiring explicit top, bottom, left, right, or anchor() functions.

Directional Syntax and Common Values

The position-area property accepts one or two values indicating the target area on the grid.

1. Single Keyword Values:
   • position-area: top; positions the element directly above the anchor, centered horizontally.
   • position-area: bottom; positions the element directly below the anchor, centered horizontally.
   • position-area: left; positions the element to the left, centered vertically.
   • position-area: right; positions the element to the right, centered vertically.
2. Two-Keyword Combinations:
   • position-area: top left; places the element in the top-left cell.
   • position-area: bottom right; places the element in the bottom-right cell.
   • position-area: center right; matches the behavior of right.
3. Spanning Multi-Cell Areas: To make an anchored element stretch or occupy multiple grid tracks, you can use the span- keyword prefix:
   • position-area: top span-right; places the element in the top row, spanning from the anchor's horizontal center through to the right edge.
   • position-area: bottom span-all; places the element below the anchor across all three horizontal columns (left, center, and right).

Practical Code Comparison

Before position-area, centering a tooltip above a button using the Anchor Positioning API required coordinating inset properties and self-alignment:

/* Traditional Anchor Positioning */
.tooltip {
  position: fixed;
  position-anchor: --my-anchor;
  bottom: anchor(top);
  justify-self: anchor-center;
  margin-bottom: 8px;
}

With position-area, the browser implicitly sets both the placement and the corresponding alignment defaults:

/* Modern Approach with position-area */
.tooltip {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top;
  margin-bottom: 8px;
}

Logical Property Support

position-area fully supports CSS logical values, ensuring seamless adaptability for right-to-left (RTL) and vertical writing modes. You can substitute physical directions with their logical counterparts:

• block-start instead of top
• block-end instead of bottom
• inline-start instead of left (in standard LTR)
• inline-end instead of right (in standard LTR)

Using position-area: block-start inline-end; guarantees that the anchored element appears at the start of the block axis and the end of the inline axis regardless of the document's language direction.

Automatic Alignment Handling

A major benefit of position-area is that it alters the default alignment behavior. When assigning an element to an area like top left, the element automatically aligns its bottom edge against the anchor's top edge and its right edge against the anchor's left edge. This eliminates the need for manual translate() transforms or separate align-self and justify-self declarations, making layout definitions significantly more concise and maintainable.