如何通过z-index覆盖另一个div

Question

在这个例子中提到

我只能使用id="covered"在id="cover"的div上找到z-index的div。

还有其他解决方案吗？

来自http://codepen.io/anon/pen/jhgtf的代码：

HTML：

<div id="cover"></div>
<div id="covered"></div>

CSS：

#cover{
  position:fixed;
  width:800px;
  background:black;
  height:350px;
  z-index:10;
}
#covered{
  width:80px;
  background:yellow;
  height:50px;
  z-index:11;
}

Answer 1

您需要在position上指定#covered：

#cover{
  position:fixed;
  width:800px;
  background:black;
  height:350px;
  z-index:10;
}
#covered{
  position: fixed;
  width:80px;
  background:yellow;
  height:50px;
  z-index:11;
}

CodePen example

static（默认）定位的元素不受z-index影响 - 只有fixed，relative或absolute定位的定位元素。您应该使用哪些内容取决于上下文。

Official z-index specification

Answer 2

#covered{
  position:relative;
  width:80px;
  background:yellow;
  height:50px;
  z-index:11;
}

Answer 3

定义covered div position。