position-area
Places an anchored element in one of nine cells of an imaginary 3 × 3 grid around its anchor.
Syntax
position-area: block-side inline-side;Values
| Parameter | Type | Description |
|---|---|---|
| top, bottom, center | keyword | The row: above, below or level with the anchor. |
| left, right, center | keyword | The column: to the left, to the right or level with the anchor. |
| span-* | keyword | Stretch over two cells, e.g. `span-right` covers the center and right columns. |
Examples
A menu below the button, aligned to the button's left edge:
<style>
.btn { anchor-name: --menu-btn; }
.menu {
position: absolute;
position-anchor: --menu-btn;
position-area: bottom span-right;
margin: 4px 0 0; padding: 4px 0; list-style: none;
border: 1px solid #ccc; background: white;
}
.menu li { padding: 4px 12px; }
</style>
<button class="btn">Options</button>
<ul class="menu"><li>Edit</li><li>Share</li><li>Delete</li></ul>Notes
One keyword is enough when the other axis is center: position-area: top puts the element centered above the anchor. The grid cell also limits the available space, so long content wraps rather than overflowing. Add position-try so the element can flip when it does not fit.
See also
- anchor-name — Names an element as an anchor, so that an absolutely positioned element anywhere on the page can be placed next to it.
- position-anchor — Chooses the default anchor for an absolutely or fixed positioned element; `position-area` and `anchor()` then measure from it.
- anchor() — Returns the position of a side of the anchor element; used in `top`, `left`, `right`, `bottom` to attach an element to it.
- position-try-fallbacks — Lists backup positions for an anchored element; the browser uses the first one where the element fits on the screen. Custom positions are described with `@position-try`.
In the tutorial
- Anchor positioning — CSS anchor positioning — how to attach a tooltip or menu to another element: anchor-name, position-anchor, the anchor() function, position-area, fallback positions with position-try-fallbacks and browser support.