Question

我已经读过为了让z-index生效，所涉及的CSS元素需要具有＆＃34; position＆＃34;属性。所以我有一个菜单，当有人点击菜单图标时，我想在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，也无法将按钮视为容器元素，例如div，nav，header ..etc 。您的正确选择器将为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，你想在图像上显示菜单，所以你必须在标题中使用z-index然后#personImgDiv我已经给出了答案，它会更清楚

为什么z-index不起作用，尽管指定了＆＃34;位置＆＃34;？

2 个答案: