title: Override CSS Z-Index Stacking Context
body: <p>I'm trying to override / ignore the stacking context for an element so it can be positioned on the z-axis relative to the page root.</p>
  <p>However, according to the article <a href="http://philipwalton.com/articles/what-no-one-told-you-about-z-index/" rel="noreferrer"><strong>What No One Told You About Z-Index</strong></a>:</p>
  <blockquote>
  <p>If an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!</p>
  <p>New stacking contexts can be formed on an element in one of three ways:</p>
  <ul>
  <li>When an element is the root element of a document (the  element)</li>
  <li>When an element has a position value other than static and a z-index value other than auto</li>
  <li>When an element has an opacity value less than 1</li>
  </ul>
  </blockquote>
  <p>With the following example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.red, .green, .blue { position: absolute; }
  .red   { background: red; }
  .green { background: green; }
  .blue  { background: blue; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;span class="red"&gt;Red&lt;/span&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span class="green"&gt;Green&lt;/span&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span class="blue"&gt;Blue&lt;/span&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If the first div is given <code>opacity:.99;</code>, (which creates a <a href="http://www.w3.org/TR/CSS2/zindex.html" rel="noreferrer">new stacking context</a> on the first node) then even <strong>if <code>.red</code> has <code>z-index:1</code>, it will still be placed behind the other elements</strong> because it is just rendered as the highest element within that stack.</p>
  <h1><a href="http://jsfiddle.net/KyleMit/b5Hz9/" rel="noreferrer">Working Demo in jsFiddle</a></h1>
  <p>Which looks like this:</p>
  <p><img src="https://i.imgur.com/oLJ3JwZ.png" alt="demo" /></p>
  <p><strong>Q</strong>: Is there a way for an element to ignore the stack context of any of it's parent elements and ask to be positioned relative to the original stack context of the page?</p>