anchor-name
Defines a unique name for an element so it can be used as an anchor for other positioned elements. This creates the relationship needed for anchor positioning to work.
It is documented as part of the CSS Anchor Positioning specification.
Syntax
/* Usage Example */
.button-target {
anchor-name: --my-tooltip-anchor;
}
.tooltip{
position: absolute;
position-anchor: --my-tooltip-anchor;
}
/* Syntax */
anchor-name: none;
/* Global values */
anchor-name: inherit;
anchor-name: initial;
anchor-name: revert;
anchor-name: revert-layer;
anchor-name: unset;anchor-name Browser support
Limited availability
Since
2020 77% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
125+
125+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more