title: How to override "inherited" z-indexes?
body: <p>I am needing to override the notion of inherited z-indexes. </p>
  
  <p>For instance in this code</p>
  
  <pre><code>&lt;style&gt;
  div{
    background-color:white;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
  }
  &lt;/style&gt;
  &lt;div style="position: fixed; z-index: 2;"&gt;
     div 1
     &lt;div style="position: fixed; z-index: 3;"&gt;
       div 2
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;div style="position: fixed; z-index: 2;"&gt;
   div 3
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsbin.com/epoqo3/3" rel="nofollow noreferrer">http://jsbin.com/epoqo3/3</a></p>
  
  <p>I want for <code>div 2</code> to be displayed, but instead <code>div 3</code> is displayed. How can I change this behavior without changing my structure.</p>