title: Using z-index correctly
body: <p>I have following code snippet in css</p>
  
  <pre><code>&lt;style&gt;
  #overload {
      background-color:black;
      opacity:0.6;
      position:fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      color:#FFFFFF;  
  }
  
    .test {
      width:50px; height:50px; background-color:white; color black; z-index:1000;
  }
   &lt;/style&gt;
  </code></pre>
  
  <p>HTML coding</p>
  
  <pre><code>&lt;div id="overload"&gt; &lt;/div&gt;
  &lt;div class="test"&gt;Testing &lt;/div&gt;
  </code></pre>
  
  <p>I want to display "Testing" content above the layer "overload" how can I achieve it through css ? As I tried using z-index and not working as expected.</p>
  
  <p><a href="https://jsfiddle.net/gt7kk643/" rel="nofollow">https://jsfiddle.net/gt7kk643/</a></p>