如何让导航栏下拉菜单浮动在所有元素之上？
如何让导航栏下拉菜单浮动在所有元素之上？
提问于 2020-06-16 17:30:25
我正在尝试创建一个导航栏下拉列表使用材料设计。它工作得很好。我唯一的问题是所有其他的元素都漂浮在dropdown上面。
我想要的是dropdown应该浮动在所有其他元素之上。我使用了"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/
如果我能得到一些建议，那将是很有帮助的。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-06-16 17:46:48
您所要做的就是将索引应用于父元素(用于导航项目的header或div )，以便实际应用该父元素中后代/子项的z- position: relative;。
Stack Overflow用户
发布于 2020-06-16 18:08:13
标头应该有一个相对位置。
.MuiAppBar-positionStatic {
position: relative;
} 或
header {
position: relative;
}Stack Overflow用户
发布于 2020-06-16 17:46:58
解决方案是向父组件添加z索引，该父组件是图表组件的同级组件。在本例中，它是<header>。因此，在JSX中，您可以这样做：
<header style={{ position: "absolute", zIndex: 100 }}>
/** -- snip -- **/
</header>或者，您可以添加一个类来为您完成此操作。必须这样做，因为z-index只影响它们的同级。所以只有同级div才能有相互重叠的z-index。
这是模态等的一个非常常见的问题。z索引继承自div之上的任何父级；这称为堆叠上下文：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62405339
复制相关文章
相似问题
腾讯云开发者
