css - CSS: 透明な div セクションを持つ不透明なオーバーレイ

Question

ヘルプを受け取ることができる DIV を除いて、アクティブ化されたときにページを不透明にするサイトのヘルプ システムを開発しています。

問題は、不透明な背景の上に特定の div を透明に「表示」する方法がわからないことです。

div の z-index を背景よりも高い値に設定しようとしましたが、うまくいかないようです。

これは、問題を示す JSBin です。「ヘルプ」クラスを持つものはすべて透明に見える (つまり、不透明ではない) 必要があります。

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

ありがとう。

Answer 1

css ファイルで li.help の position 属性を設定する必要があります

例えば

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