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

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/

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

Answer 1

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

Answer 2

标题应该有一个相对位置。

.MuiAppBar-positionStatic {
    position: relative;
} 

或

header {
    position: relative;
}

Answer 3

解决方案是给作为图表组件兄弟的父组件添加一个 z-index。在这种情况下，它是<header>。所以在 JSX 中你可以这样做：

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

或者你可以添加一个类来为你做这件事。必须这样做，因为 z-index 只影响他们的兄弟姐妹。所以只有兄弟 div 的 z-index 可以相互重叠。

这是 modals 等非常常见的问题。z-index 继承自 div 上方的任何父级；这称为堆叠上下文：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context