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

Question

在这个例子中提到

只是通过使用,我无法在div的id="covered"顶部获得div .id="cover"z-index

还有其他解决方案吗？

代码来自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示例

具有元素static(缺省)定位不受z索引-仅与定位的元素fixed,relative或absolute定位是.您应该使用哪些内容取决于上下文.

官方z-index规范