尽管指定了 "position"，但为什么 z-index 不起作用？

Question

我读到要使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/。我还缺少什么？如何让菜单始终显示在前面？

Answer 1

这是因为您使用了错误的选择器。 .menu-btn是buttonclass，它只会影响这个button，也没有办法将按钮视为容器元素，例如div, 导航, 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; 
}

Answer 2

#personImgDiv{
    position: relative;
    z-index: 100;
}
header{
    z-index: 101;
}

我明白了。你在 porosinIngDiv 中使用了 z-index:100，你想在图像上显示菜单，所以你必须在 header 中使用更多的 z-index 然后#personImgDiv 我已经在上面给出了答案它会更多清除

尽管指定了 "position"，但为什么 z-index 不起作用？

Why doesn't z-index work although with specified "position"?

html

css

position

z-index