NavigationBar: Add z-index css property when sticky position css is applied

[kohli-pratik-sage]

Current behaviour

When the NavigationBar component with a submenu has stickyPosition="top" applied to it and there is an element below it that has the position: relative css applied, for instance the Drawer component, the below component (Drawer) appears in front the opened submenu dropdown.

Expected behaviour

The submenu dropdown appears in front of the relatively positioned element.

CodeSandbox or Storybook URL

https://codesandbox.io/s/snowy-dawn-mngih?file=/src/index.js

JIRA Ticket (Sage Only)

No response

Suggested Solution

A value of 1 for z-index seems to suffice when the Drawer component is below the NavigationBar component but taking into consideration other components, this value may need to be different.

Carbon Version

101.1.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

What Operating System are you seeing the problem on?

MacOS

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[mkrds]

FE-4712

[carbonci]

:tada: This issue has been resolved in version 104.7.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: