z-index chaos (DropDown + Dialog + Select)

[adatti]

I don't understand why I'm able to set z-index on certain components (like Dialog) , but not on most others (DropDownMenu, Select, etc.).

For instance, imagine that I need to make sure the z-index on all my Dialogs is set to a specific value (e.g. setting it to 1000 on both the DialogContent and its DialogOverlay to make sure that the Dialog covers the Overlay, while the Overlay covers the fixed navbar at the top, whose z-index is 999).

Now imagine that I have a DropDownMenu (z-index not customizable) in which one of the items triggers the appearance of a Dialog. So far, so good: when the Dialog appears, the DropDownMenu is behind the Dialog and Overlay, so things look fine.

But now imagine that inside of the DialogContent I also have a Select (z-index not customizable). The Select menu won't be visible, because it is hidden behind the Dialog and Overlay.

The only way to override z-index on components like Select or DropDownMenu is by selecting with [data-radix-popper-content-wrapper] in CSS, but that's not workable when you have multiple such components in the DOM and want them to follow a specific visual hierarchy.

I suppose there's a technical reason why this isn't easy to do, but I feel like it limits the consumer's ability to style the primitives.

[benoitgrelard]

Hey @adatti,

Firstly, if you use the Portal part on all of these, you shouldn't even really need to fiddle with z-index as they will be appended naturally one after the other in document.body, so layering will be correct by default.

If for whatever reason this isn't good for you and you'd rather explicitly control z-index you can absolutely do so by setting it on the Content part of all of those components.

The z-index is automatically lifted up to the popper wrapper for you.

Hope this helps 🙂

✌️