v138 · css
Popover Position Lab
Drag the anchor point around the dashed area. The popover repositions using position-try-fallbacks to stay on screen, and @container anchored(fallback) rewrites its colour and label to tell you which fallback the engine picked — no JavaScript required for the style change.
Drag ⊕ anywhere in the dashed area — push it into a corner to trigger fallbacks.
below-right (default)
below-left
above-right
above-left
Anchored popover
Active fallback:
detecting…
anchor at center
Live readout
anchor X
—
anchor Y
—
popover left
—
popover top
—
quadrant
—
expected fallback
—
/* Chrome 138: @container anchored(fallback) */
/* 1. Declare fallbacks on the positioned element */
.popover {
position-anchor: --my-anchor;
left: anchor(right);
top: anchor(bottom); /* default: below-right */
position-try-fallbacks:
--below-right, --below-left,
--above-right, --above-left;
container-type: inline-size; /* enables @container anchored() */
}
/* 2. Style based on which fallback the engine picked */
@container anchored(--above-left) {
.popover-header { background: var(--accent-rose); }
.arrow { transform: rotate(180deg); }
}
@container anchored(--below-left) {
.popover-header { background: var(--accent-emerald); }
}
Why this matters: Before Chrome 138, a popover that repositions via
position-try-fallbacks had no CSS-native way to know which fallback the engine
settled on. Developers had to poll getBoundingClientRect() in JavaScript and
toggle classes manually. @container anchored() closes that loop — the arrow
direction, colour, and any other style can all update in CSS, with zero JS required.