我看过,为了让z-index生效,涉及到的CSS元素需要有“position”属性。所以我有一个菜单,当有人单击菜单图标时,我希望它显示在 IMG 上。我在内容区域中为菜单和图像设置了这些样式...
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
#personImgDiv {
position: relative;
z-index: 100;
display: table-cell;
width: 80%;
}
但是,当我单击菜单图标时,菜单仍然出现在图像后面 -- https://jsfiddle.net/bdcmka1r/2/ .我还缺少什么?如何让菜单始终显示在前面?
最佳答案
这是因为您使用了错误的选择器。 .menu-btn
是button
类,它只会影响这个button
,也没有办法把一个button当作一个容器元素,例如 div、nav、header 等。您的正确选择器将是 nav
,因为您的菜单包含在 nav
标签中。因此,您需要将 position
和 z-index
属性添加到 nav
选择器中。
nav {
display: none;
width: 100vw;
padding: 0rem;
background-color: red;
position: absolute;
z-index: 9999;
right: 0%;
top: 100%;
text-align: left;
}
关于html - 为什么 z-index 虽然指定了 "position"却不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48759257/