CSS：透明div部分的不透明覆盖

Question

我正在为一个网站开发一个帮助系统，他们希望页面在激活时变为不透明，除了您可以获得帮助的DIV。

问题是我无法弄清楚如何让特定的div在不透明的背景上“显得”透明。

我尝试将div的z-index设置为高于背景的值，但这似乎不起作用。

这是一个说明问题的JSBin。任何带有“帮助”类的东西都应该是透明的（即不是不透明的）

http://jsbin.com/ifohuc/1/edit

感谢。

Answer 1

您必须在css文件中设置li.help的位置属性

例如

position:relative;

Answer 2

将#bgDiv更改为z-index= -1

http://jsbin.com/ifohuc/2/

#bgDiv {
  width: 100%;
  height: 100px;
  min-height: 100%;
  background-color: #999999;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0.85;
  z-index: -1;
}