title: Is position: fixed z-index relative to its parent's z-index?
body: <p>I have a fixed position element inside a relatively positioned element, as far as I'm concerned the <code>position: relative</code> element shouldn't have any effect on the <code>position: fixed</code> (fixed elements are positioned relative to the window, right?).</p>
  
  <p>However, the fixed elements z-index seems to be inherited by it's parent, to the point where it's z-index can be no higher than its parent's z-index.</p>
  
  <p>I hope I'm making sense? Below is a HTML example of what I'm talking about:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer { 
      position: relative; 
      z-index: 2; 
  }
  .inner { 
      background: #fff; 
      left: 50px; 
      position: fixed; 
      top: 40px; 
      z-index: 1000000; 
  }
  
  .fade { 
      background: #555; 
      bottom: 0; 
      left: 0; 
      opacity: 0.5; 
      position: fixed; 
      right: 0; 
      top: 0; 
      z-index: 3; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
      &lt;div class="inner"&gt;testing testing&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="fade"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you change the following:</p>
  
  <pre><code>.outer { position: relative; z-index: 4; }
  </code></pre>
  
  <p>Then the <code>.inner</code> element appears in front of the fade element.</p>
  
  <p>I find this behaviour very peculiar... is there a way of working around this without moving the <code>.inner</code> div, or changing the CSS of the <code>.outer</code> div?</p>
  
  <p>Fiddles of above code samples:</p>
  
  <p><a href="http://jsfiddle.net/n2Kq5/" rel="noreferrer">http://jsfiddle.net/n2Kq5/</a></p>
  
  <p><a href="http://jsfiddle.net/U8Jem/1/" rel="noreferrer">http://jsfiddle.net/U8Jem/1/</a></p>