position-area
A newer, simplified way to position an element relative to its anchor. Instead of manually calculating top/left, you can use logical regions like 'top-right' or 'bottom-center'.
Quick example
.floating-menu {
position: absolute;
position-anchor: --menu-trigger;
/* Automatically places the menu at the bottom-center of the anchor */
position-area: bottom center;
}Quick facts
Initial value
noneInherited
No
Applies to
positioned elements with a default anchor element
Animation type
discrete
Values
none position-area Browser Support
Limited availability 76% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
129+
129+