css - CSS: Opaque overlay with transparent div sections

Question

I'm developing a help system for a site where they want the page to turn opaque when activated except for the DIVs you can receive help on.

The problem is I can't figure out how to get specific divs to "appear" transparent on top of an opaque background.

I tried setting the z-index of the divs to a value higher than the background but that doesnt seem to work.

Here is a JSBin illustrating the issue. Anything with the "help" class should appear to be transparent (i.e. not opaque)

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

Thanks.

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;
}