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'.
It is documented as part of the CSS Anchor Positioning specification.
Syntax
/* Usage Example */
.floating-menu {
position: absolute;
position-anchor: --menu-trigger;
/* Automatically places the menu at the bottom-center of the anchor */
position-area: bottom center;
}
/* Syntax */
position-area: none;
/* Global values */
position-area: inherit;
position-area: initial;
position-area: revert;
position-area: revert-layer;
position-area: unset;position-area Browser support
Limited availability
Since
2020 76% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
129+
129+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more