The position-area property places an element in one of nine 3×3 regions around its anchor (top, bottom, left, right, center, and combinations). A high-level shortcut for anchor-relative placement without explicit anchor() math..tooltip {
position-area: top;
}.popover {
position: fixed;
position-anchor: --field;
position-area: block-end span-inline-start;
}noneNo area placement (default).topAbove the anchor.bottomBelow the anchor.leftTo the left of the anchor.rightTo the right of the anchor.centerCentered over the anchor on the relevant axis.startAt the start side of an axis (logical).endAt the end side of an axis (logical).block-startAt the block-start edge (logical).block-endAt the block-end edge (logical).inline-startAt the inline-start edge (logical).inline-endAt the inline-end edge (logical).self-startUses the element's own start (not the parent's).self-endUses the element's own end.self-block-startblock-start relative to the element's own writing direction.self-block-endblock-end relative to the element's own writing direction.self-inline-startinline-start relative to the element's own writing direction.self-inline-endinline-end relative to the element's own writing direction.span-topSpans the top area (extends across the row).span-bottomSpans the bottom area.span-leftSpans the left area.span-rightSpans the right area.span-block-startSpans the block-start area.span-block-endSpans the block-end area.span-inline-startSpans the inline-start area.span-inline-endSpans the inline-end area.span-startSpans the start area (logical).span-endSpans the end area (logical).span-allSpans all three cells along the axis.x-startAt the start side of the physical X axis.x-endAt the end side of the physical X axis.y-startAt the start side of the physical Y axis.y-endAt the end side of the physical Y axis.span-x-startSpans the x-start area.span-x-endSpans the x-end area.span-y-startSpans the y-start area.span-y-endSpans the y-end area.self-x-startx-start relative to the element's own direction.self-x-endx-end relative to the element's own direction.self-y-starty-start relative to the element's own direction.self-y-endy-end relative to the element's own direction.span-self-startSpans the self-start area.span-self-endSpans the self-end area.span-self-block-startSpans the self-block-start area.span-self-block-endSpans the self-block-end area.span-self-inline-startSpans the self-inline-start area.span-self-inline-endSpans the self-inline-end area.span-self-x-startSpans the self-x-start area.span-self-x-endSpans the self-x-end area.span-self-y-startSpans the self-y-start area.span-self-y-endSpans the self-y-end area.CSS Anchor Positioning Module Level 1Editor's DraftW3CMDN
This can be edited.
⚓︎Show all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
