How to make navbar dropdown float above all elements?

user_6893979 0
Viewed 699

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.

Screenshot

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.

material-ui css html javascript
3 Answers

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.

enter image description here

user_93128290

The header should have a relative position.

.MuiAppBar-positionStatic {
    position: relative;
}

or

header {
    position: relative;
}
user_137489740

The solution is to add a z-index to the parent component that is the sibling of the chart component. In this case it's <header>. So in JSX you can do:

<header style={{ position: "absolute", zIndex: 100 }}>
  /** -- snip -- **/
</header>

Or you can add a class to do this for you. It has to be done like this because z-index's only affect their siblings. So only sibling divs can have z-index's that overlap eachother.

This is a very common problem with modals etc. The z-index is inherited from any parents above the div; This is known as the stacking context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

user_132222310
Related