HTML

Question

我知道 z-index 需要 div 定位。

然后，我不知道为什么它在我的情况下不起作用：

html {
  height: 100%;
}
body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#signDiv {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#infoDiv {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
}

<body>
  <div id="signDiv">
    ...
  </div>

  <div id="infoDiv">
    ...
  </div>
</body>

两个div不叠加，有解吗？

非常感谢

Answer 1

你说得对，在一个元素上声明一个位置将使其 z-index 属性生效。但在你的例子中，因为你的元素在 [=20= 中的顺序], infoDiv 在 z-index 方面默认已经在顶部。你甚至不需要 z-index。

你需要的是将他们的位置设置为 absolute 而不是 relative。

类似的东西：http://codepen.io/memoblue/pen/xOBBxK

Answer 2

html {
  height: 100%;
}
body {
   margin: 0px;
   padding: 0px;
}
#signDiv {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#infoDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}

<body>
  <div id="signDiv">
    ...1
  </div>

  <div id="infoDiv">
    ...2
  </div>
</body>

HTML - Css : z-index 不适用于相对位置

HTML - Css : z-index not working with relative positions

css

z-index