title: Z-index not hiding background
body: <p>I am trying to over lap a div on another div  by using css, while background should become blur,  like modal pop up show.</p>
  
  <p>But the background of modal pop is still getting displayed through the modal pop up.</p>
  
  <p><img src="https://i.stack.imgur.com/4xLip.jpg" alt="enter image description here"></p>
  
  <p>As u can see background is visible through the modal pop up!!
  I have setted z-index of pop up more than the background</p>
  
  <p>CSS:</p>
  
  <pre><code>       .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;
  
  }
  </code></pre>
  
  <p>My design:</p>
  
  <pre><code>     &lt;div id="MoreDetails" class="MoreDetails" &gt;
  
             &lt;div id="tableDetails" class="tblView"&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>