title: z-index not working to get an element above the overlay
body: <p>I have a horizontal list boxes which is overlapped by a pop up overlay. And horizontal boxes are structured using <code>ui li</code></p>
  
  <p>Now the question is, how to get the single box above the overlay using <code>z-index</code>. In my example I need to get the <code>li</code> which has class name <code>.test</code> above the overlay div.</p>
  
  <pre class="lang-css prettyprint-override"><code>.wrapper { position: relative }
  
  ul li {
    margin:0;
    padding:0
  }
  
  li {
    background:yellow;
    display:inline-block;
    width:60px;
    height: 60px;
  
  }
  
  .overlay {
    background: rgba(0,0,0,0.5);
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10
  }
  
  .test {
    z-index:100 /*not working */
  }
  </code></pre>
  
  <p><strong><a href="http://jsbin.com/rocelive/3/" rel="nofollow">DEMO</a></strong></p>