Ensure dropdown is placed above other elements.

[Half-Shot]

I believe this would ensure dropdowns work correctly when other absolute Elements are placed beneath them.

[cloudflare-workers-and-pages]

Deploying compound-web with    Cloudflare Pages

Latest commit:	531e390
Status:	✅  Deploy successful!
Preview URL:	https://2aa71167.compound-web.pages.dev
Branch Preview URL:	https://hs-z-index-dropdown.compound-web.pages.dev

View logs

[robintown]

I've been really happy that our component library has so far avoided the use of z-index: 999; hacks, and am reluctant to start using such a rule here. We've managed to make tooltips and menus display correctly with z-index: auto; by putting their "floating" bits in a React portal which gets the right layering by virtue of its location in the DOM. I would prefer to try the same here since z-indices are always going to be application-dependent, and you could still see layering glitches if the dropdown is housed inside yet another stacking context.

I do see that replacing the 999 with a custom property helps, as applications could customize the z-index if they really need to, but I'd like to return to this solution only if portals don't appear to be an option.

[Half-Shot]

Agreed with your comments, I'll have a go.