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

最大的问题是你将tableDetails嵌套在MoreDetails div中。您申请opacity的任何z-index或tableDetails都会影响MoreDetails。另一种方法可能是在::before上使用tableDetails伪类，并使用CSS定位两个。

其他一些提示：

• 不要共享ID和类名。使用MoreDetails作为id和 在你进步的过程中，课程可能最终会破坏。
• opacity可以 只有0 - 1的值。

希望这有帮助！祝你好运！

Answer 2

即使使用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;
}