How to make navbar dropdown float above all elements?

Question

I am trying to create a navbar dropdown using material design. It is working fine. The only problem I have is that all the other elements are floating above the dropdown.

What I want is that dropdown should float above all the other elements. I have used "z-index", but it's not working.

element.style {
    transform: none;
    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.makeStyles-dropdownMenu-81 {
    z-index: 10000;
    position: absolute;
    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
}

.makeStyles-root-80 {
    width: 10%;
    max-width: 360px;
    background-color: #fff;
}

.MuiList-padding {
    padding-top: 8px;
    padding-bottom: 8px;
}

.MuiList-root {
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
}

nav {
   display: block;
}

<nav class="MuiList-root makeStyles-root-80 makeStyles-dropdownMenu-81 MuiList-padding" aria-label="mailbox folders" style="transform: none; transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
  <div class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false">
    <div class="MuiListItemText-root">
      <span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">Inbox</span>
    </div>
    <span class="MuiTouchRipple-root"></span>
  </div>
  
  <hr class="MuiDivider-root">
  
  <div class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-button" tabindex="0" role="button" aria-disabled="false">
    <div class="MuiListItemText-root">
      <span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">Drafts</span>
    </div>
    <span class="MuiTouchRipple-root"></span>
  </div>
  
  <div class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false">
    <div class="MuiListItemText-root">
      <span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">Trash</span>
    </div>
    <span class="MuiTouchRipple-root"></span>
  </div>
  
  <hr class="MuiDivider-root MuiDivider-light">
  
  <div class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false">
    <div class="MuiListItemText-root">
      <span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">Spam</span>
    </div>
    <span class="MuiTouchRipple-root"></span>
  </div>
</nav>

Link: https://surroundinganchovy.htmlpasta.com/

It will be helpful if I can get some suggestion.

Answer 1

All you would have to do is apply a position: relative; to the parent element (either the header or the div that is used for the navigation item) so that the z-index of the descendants/children in that parent element is actually applied.

Answer 2

The header should have a relative position.

.MuiAppBar-positionStatic {
    position: relative;
} 

or

header {
    position: relative;
}