html - 为什么 z-index 虽然指定了 "position"却不起作用？

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是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; 
}