CSS <position-area> Data Type

The CSS <position-area> data type represents a region of the position-area grid used by CSS Anchor Positioning. It allows an absolutely positioned element to be placed in an area around its anchor using physical, logical, or coordinate-based keywords.

Syntax

A <position-area> uses one or two keywords to select an area of the position-area grid relative to an anchor:

top
bottom
left
right
center
top left
bottom right
block-start
inline-end
block-end inline-start
x-start
y-end
self-x-start
self-y-end

The available keywords include physical directions, logical directions, and coordinate directions. One keyword can select an entire row or column, while two keywords can select a more specific region.

Position-area Grid

CSS Anchor Positioning divides the containing block into a position-area grid based on the anchor's location. The anchor occupies the center region, with additional regions extending above, below, to the left, and to the right.

The <position-area> value selects one or more of these regions as the containing block for the positioned element. This provides a convenient way to place elements such as tooltips, labels, and popovers relative to an anchor.

Physical Keywords

Physical keywords describe positions using the physical sides of the containing block.

Keyword	Description
`top`	Selects an area above the anchor.
`right`	Selects an area to the right of the anchor.
`bottom`	Selects an area below the anchor.
`left`	Selects an area to the left of the anchor.
`center`	Selects the center region along the applicable axis.

Logical Keywords

Logical keywords describe areas according to the document's writing mode rather than fixed physical directions.

Keyword	Description
`block-start`	Selects the area at the start of the block axis.
`block-end`	Selects the area at the end of the block axis.
`inline-start`	Selects the area at the start of the inline axis.
`inline-end`	Selects the area at the end of the inline axis.

Logical keywords are useful when a layout needs to adapt automatically to different writing modes and text directions.

Coordinate Keywords

Coordinate keywords describe areas using the horizontal and vertical axes. The x-start, x-end, y-start, and y-end keywords use the containing block's coordinate system.

x-start
x-end
y-start
y-end

Self-relative coordinate keywords use the positioned element's own writing direction when determining the start and end sides:

self-x-start
self-x-end
self-y-start
self-y-end

Combining Values

Two keywords can be combined to select a more specific region around the anchor. The keywords can describe positions on different axes.

top left
top right
bottom left
bottom right
block-start inline-end
y-end x-start

For example, top right selects an area above and to the right of the anchor, while block-end inline-start describes the corresponding region using logical directions.

<position-area> Example

The following example creates an anchor and positions another element below it using the position-area property:

.anchor {
  anchor-name: --example;
}
.positioned {
  position: absolute;
  position-anchor: --example;
  position-area: bottom;
}

Browser Result

Anchor

position-area: bottom

The Browser Result illustrates the intended placement. The positioned element appears in the area below the anchor.

The <position-area> data type is used by CSS Anchor Positioning and is closely related to properties that establish anchors and control anchored positioning, including:

Specifications

The <position-area> data type is defined in the CSS Anchor Positioning Module Level 1 .

CSS <position-area> Data Type