css - Z-index 不隐藏背景

Question

我试图通过使用 css 将一个 div 重叠在另一个 div 上，而背景应该变得模糊，就像模式弹出显示一样。

但是模态弹出的背景仍然通过模态弹出窗口显示。

如您所见，通过模态弹出窗口可以看到背景!!我设置了弹出的z-index比背景多

CSS:

       .MoreDetails
{

  background-color: #000;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display:   block;
  opacity: 0.7;
  z-index: 100;
  text-align: center;


   }

.tblView
{
  position: fixed;
  top: 10%;
  left: 30%;
  z-index:1;
  opacity: 2.0;

}

我的设计:

     <div id="MoreDetails" class="MoreDetails" >

           <div id="tableDetails" class="tblView">

            </div>

        </div>

Answer 1

即使使用 z-index，子元素也不能堆叠在父元素之下。

使用 z-index 来维护绝对定位的兄弟元素的堆栈级别。

http://jsfiddle.net/TWLgc/

HTML

<div class="wrapper">

 <div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">

</div>             
</div>

<div id="tableDetails2" class="tblView2">

</div>

</div>

CSS

.MoreDetails
{

  /*background-color: #000;*/
  background-color: rgba(0,0,0,0.8);
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display:   block;
  /*opacity: 0.7;*/
  z-index: 100;
  text-align: center;
}

.tblView
{
  position: fixed;
  top: 10%;
  left: 30%;
  z-index:1;
  opacity: 1;

    background-color: red;
    height: 100px;
    width: 100px;
}
.tblView2
{
    position: fixed;
    margin:auto;top:0;bottom:0;left:0;right:0;
    z-index: 101;
    opacity: 1;
    background-color: red;
    height: 100px;
    width: 100px;
}