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.
Quick example
.button-target {
anchor-name: --my-tooltip-anchor;
}
.tooltip {
position: absolute;
position-anchor: --my-tooltip-anchor;
}Quick facts
Initial value
noneInherited
No
Applies to
all elements that generate a principal box
Animation type
discrete
Values
none anchor-name Browser Support
Limited availability 77% 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.
125+
125+