position-area: The Anchor Placement Grid

Anchor positioning lets an overlay attach itself to another element with CSS alone. The first examples most people see use the anchor() function in inset properties — top: anchor(bottom); left: anchor(left) — which is precise but verbose, and easy to get subtly wrong when centring or spanning. position-area is the higher-level alternative. It imagines a 3×3 grid around the anchor, with the anchor in the middle cell, and lets you say which cells the overlay should occupy: top, bottom right, bottom span-right. The browser works out the containing block and a sensible default alignment. This page explains the grid, the keywords, and how position-area combines with fallbacks. It belongs to Anchor Positioning & Overlays in the Mastering Container Queries & Responsive Layouts guide.

The grid around the anchor

Draw lines along the anchor's four edges and extend them to the edges of the positioned element's containing block. That divides the space into nine cells: three rows (top, center, bottom) and three columns (left, center, right), with the anchor in the centre cell. position-area names one or more of those cells, and the element's containing block becomes that region. Insets default to zero inside it, so the element sits within the chosen area.

A single keyword is shorthand for a whole row or column band: position-area: top is equivalent to top span-all, the entire top row, and default alignment centres the element over the anchor within it. Using one row keyword and one column keyword picks a single cell. The span-* keywords, described below, pick two adjacent cells.

The complete implementation

Choose a value in the demo to move the panel around the anchor button. The demo uses no script: radio buttons set position-area through :has().

.trigger {
  anchor-name: --menu-trigger;
}

.panel {
  position: absolute;
  position-anchor: --menu-trigger;
  position-area: bottom span-right;   /* below, aligned with the trigger's left edge */
  margin-block-start: 0.25rem;         /* a small gap from the anchor */
  inline-size: max-content;
  max-inline-size: 16rem;

  /* If there is no room below, try above; if no room to the right, mirror. */
  position-try-fallbacks: flip-block, flip-inline;
}

There is no inset arithmetic at all. bottom span-right makes the panel's containing block the region below the anchor, starting at the anchor's left edge and extending to the right edge of the available space. The default alignment in a spanned area aligns the panel towards the anchor, so its left edge lines up with the trigger's left edge — exactly how a dropdown menu should sit. The margin adds a small gap without needing calc() on an anchor() value. Because the gap is a margin, it also flips automatically with the fallbacks: when flip-block moves the panel above the trigger, the browser mirrors the margin to the other side, so the gap stays between panel and anchor. With hand-written anchor() insets, that mirroring would need a second set of rules.

The key technique: span keywords for dropdown-style alignment

The three-cell rows and columns are fine for tooltips, which should centre on the anchor. Menus and selects usually want to align with one edge of the trigger and extend beyond it. That is what the span- keywords express: span-right covers the centre column and the right column, span-left the centre and left, and span-all all three.

Logical and self-relative keywords

The physical keywords top, bottom, left and right have logical equivalents that follow the writing mode: block-start, block-end, inline-start, inline-end, and span variants such as span-inline-end. In a right-to-left language, bottom span-inline-end places a dropdown aligned with the trigger's right edge and extending left — the correct mirror image — without a separate rule. For internationalised interfaces, the logical forms are the better default. There are also self- variants that resolve against the positioned element's own writing mode rather than its containing block's, which only matters in mixed-direction layouts.

Fallbacks with position-area

Because a single keyword pair describes a placement, fallbacks become short too. position-try-fallbacks accepts flip-block (mirror across the anchor vertically), flip-inline (mirror horizontally), their combination, or explicit position-area values:

.tooltip {
  position-area: top;
  position-try-fallbacks: bottom, right, left;
}

The browser tries each option in order when the current one would overflow the containing block, and uses the first that fits. Anchor-Positioned Tooltips That Flip builds a tooltip on this mechanism, and Anchor Positioning Fallbacks in CSS covers browsers without anchor positioning.

Sizing inside the area

Because position-area turns the chosen region into the element's containing block, percentage sizes and stretch behaviour resolve against that region, not the whole page. An element with inline-size: 100% in bottom span-all becomes as wide as the entire containing block below the anchor; in bottom center, it becomes exactly as wide as the anchor. That is occasionally useful — a panel that should match the anchor's width can use bottom center with inline-size: 100% — but more often surprising. For content-sized overlays, set inline-size: max-content and a max-inline-size, as the implementation does, so the element sizes to its content and never exceeds a readable measure. For panels that must match the trigger exactly regardless of area, anchor-size() is the explicit tool.

The region can also be smaller than the element. Placing a wide menu in top left when the anchor sits near the left edge of the page leaves only a sliver of space; the element overflows its area. That overflow is exactly what position-try-fallbacks watches for, which is why placements and fallbacks are designed together.

Common mistakes

• Forgetting absolute positioning. position-area only applies to absolutely or fixed-positioned elements. Without position: absolute (or the top-layer positioning a popover gets), the property does nothing.
• Duplicated anchor names. If several triggers share anchor-name: --menu-trigger, the positioned element attaches to the last one in the document. Give each trigger a unique name, or use anchor-scope to limit a name to a component subtree.
• Anchors the element cannot see. The anchor must be laid out before the positioned element and must not be hidden inside a separate containment boundary. Top-layer elements such as popovers can anchor to almost anything, which is one reason popovers pair so well with anchor positioning.
• Mixing physical and logical keywords. Combining top with span-inline-end is invalid; use either physical or logical keywords for both axes.

When anchor() is still the right tool

position-area covers placement relative to the anchor's box. Some layouts need more: an arrow that tracks the centre of the anchor while the tooltip is shifted, a connector line between two anchors, or an element sized between two different anchors. Those need the anchor() function in individual inset properties, sometimes combined with anchor-size(). The two approaches mix freely: set position-area for the overall placement and use anchor() or margins for the fine adjustments. anchor-size(): Overlays That Match Triggers covers sizing.

Browser support

position-area is supported in Chrome and Edge 129+, Firefox 147+ and Safari 26+. anchor-name and position-anchor are supported in Chrome and Edge 125+, Firefox 147+ and Safari 26+, and position-try-fallbacks in Chrome and Edge 128+, Firefox 147+ and Safari 26+. Some Chromium versions shipped this property under an earlier name, inset-area, before the rename; the current name is the one to use. In browsers without anchor positioning, the panel falls back to ordinary absolute positioning, so provide a baseline placement with regular insets or use the popover's default centring.

FAQ

What is position-area? A property for anchor-positioned elements that places them in one or more cells of a 3 by 3 grid formed around the anchor. position-area: top center puts the element above the anchor, horizontally centred, without writing any inset arithmetic.

What is the difference between position-area and the anchor() function?anchor() returns a specific edge coordinate of the anchor for use in inset properties, which gives precise control but needs more code. position-area picks a region of the grid and handles sizing and default alignment for you. Most overlays only need position-area.

How do I make a dropdown span the anchor and the space to one side? Use a span keyword, such as position-area: bottom span-right. The element's area starts at the anchor's column and extends into the column to its right, so it aligns with the anchor's left edge and can grow rightwards.

Does position-area work with position-try fallbacks? Yes. position-try-fallbacks accepts position-area values and flip keywords, so an element placed at the top can fall back to the bottom when there is not enough room above the anchor.

Related

• Anchor Positioning & Overlays — the parent guide.
• Anchor-Positioned Tooltips That Flip — fallbacks in practice.
• anchor-size(): Overlays That Match Triggers — matching widths.
• Popover Light Dismiss, Nesting and Stacking — overlays in the top layer.