Sidenav and overflow menu z-index overlap

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

When using an overflowmenu with overflowmenuitems in a sidenav component, the z-index has it set such that the overflowmenuitem is behind the sidenav component, and isn’t clickable (or visible, depending on style set).

sidenav has z-index of 8000. overflowmenuitem has z-index ofo 6000.

Is this issue related to a specific component?

Yes, sidenav and overflowmenu

What did you expect to happen? What happened instead? What would you like to see changed?

overflowmenuitem should be clickable and/or visible.

What browser are you working in?

Firefox.

What version of the Carbon Design System are you using?

10.16.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

1. Step one Createt a sidenav component
2. Step two Create an overflowmenu in the sidenav component
3. Step three Unclickable
4. etc.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

[tw15egan]

We could possibly add an overflow menu specific z-index override inside the modal and sidenav styles, but I wouldn’t change the overall z-index map.

[sstrubberg]

Fix in https://github.com/carbon-design-system/carbon/pull/12185