[DropdownMenu] Document that the z-index is shared between Content and Portal

[LewisAlderman]

trafficstars

Documentation

I was looking for how to set the z-index on the Portal of the DropdownMenu, and only by shear luck - and an eagle eyed colleague - did we notice that it was shared (the z-index set on the Content was lifted to the Portal), from the elements devtool view.

Can we please make note of this in the docs so it is clear?

Relevant Radix Component(s)

Dropdown menu (and any other that also do this, if applicable)

[andy-hook]

Absolutely, thanks for raising @LewisAlderman

[benoitgrelard]

Just to add some clarity on this, it isn't technically shared between Portal and Content but rather the Portal part doesn't render an element and so uses the Content element itself as the portal node in body. Hence you set the z-index styles on your Content part and you're done.

What you might be seeing is rather for components that are "placed" via our Popper abstraction (like Popover, DropdownMenu, etc) there is an extra wrapper for the positioning which users don't have access to, so to ensure correct z-index, we automatically "copy" the z-index you set on Content onto the parent wrapper which handles positioning as it's the higher up one that matters.

But it's a good shout that we can add a note as to where to apply z-index 👍