position-try-fallbacks
Part of the Anchor Positioning API, this property lets you define a list of 'backup' positions for an element. If the primary position would cause the element to overflow its container, the browser will try these fallbacks instead.
Quick example
.tooltip {
position: absolute;
position-anchor: --my-btn;
position-area: top center;
/* If the tooltip doesn't fit at the top, try the bottom then the right */
position-try-fallbacks: bottom center, right center;
}Quick facts
Initial value
noneInherited
No
Applies to
absolutely positioned elements
Animation type
discrete
Values
noneposition-area position-try-fallbacks 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.
128+
128+