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.
It is documented as part of the CSS Anchor Positioning specification.
Syntax
/* Usage 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;
}
/* Syntax */
position-try-fallbacks: none;
position-try-fallbacks: position-area;
/* Global values */
position-try-fallbacks: inherit;
position-try-fallbacks: initial;
position-try-fallbacks: revert;
position-try-fallbacks: revert-layer;
position-try-fallbacks: unset;position-try-fallbacks 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.
128+
128+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more