javascript - 如何使导航栏下拉菜单浮动在所有元素之上？

Question

我正在尝试使用材料设计创建导航栏下拉菜单。它工作正常。我唯一的问题是所有其他元素都浮动在下拉列表上方。

我想要的是下拉列表应该浮动在所有其他元素之上。我使用了“z-index”，但它不起作用。

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>

链接：https ://surroundinganchovy.htmlpasta.com/

如果我能得到一些建议会很有帮助。

标签： javascripthtmlcssmaterial-ui

Answer 1

您所要做的就是将 aposition: relative;应用于父元素（标题或用于导航项的 div），以便实际应用该父元素中后代/子项的 z-index。