Charts · 23

Getting the menu out of the card

Chart 13 showed why z-index: 9999 cannot rescue a menu from inside a stacking context. This is the way out. The card below scrolls, has a transform and clips its content, which is every ordinary card in every product. Open the menu and switch strategy: watch it get clipped, then escape into the top layer, then stay attached to its button without a single line of JavaScript.

Sprint board overflow: auto · transform: translateZ(0)
Make the empty state legible
Fix the filter pills

Assign to

  • Priya
  • Sam
  • Wren
  • Unassigned
z-index: 9999
Ship the chart index
Write the release notes
Rename the tokens
Next section position: relative; z-index: 1

Assign to

  • Priya
  • Sam
  • Wren
  • Unassigned
z-index: 9999

Trapped. The menu is a child of the card, and the card scrolls, clips and has a transform, so it is clipped by the scroller and painted inside the card’s stacking context. Scroll the list: the menu goes with it and gets cut off at the edge. The 9999 does nothing, for the reason in chart 13.

Notes

The top layer is a real, separate layer the browser paints above the whole document, outside every stacking context and unaffected by any ancestor’s overflow, clip-path or filter. Only three things can put an element there: dialog.showModal(), fullscreen, and the popover attribute, which also gives you light-dismiss, Escape to close, and focus management for free with popover="auto" (this demo uses manual so the panel stays put while you read). popover has been in all three engines since early 2024. Anchor positioning is the missing half: anchor-name on the button, position-anchor and position-area on the popover, and the browser keeps them together itself, including while the anchor scrolls, with position-try-fallbacks for the flip when it would overflow the viewport. It shipped in Chromium 125 (2024) and is behind a flag or unimplemented elsewhere at the time of writing, which is why the JavaScript path is still the compatible one and Floating UI still exists. The support line under the demo is measured with CSS.supports on this browser. Sources: HTML Standard, the popover attribute and the top layer; CSS Anchor Positioning Level 1; MDN, Using CSS anchor positioning.