title: Why doesn't the z-index style apply to the <body> element?
body: <p>The <code>z-index</code> style allows you to control what order boxes are painted in. For example, you can make a child element be painted below its parent element:</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>#parent {
    background: rgba(33, 33, 33, 0.7);
  }
  #child {
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
    z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent"&gt;&lt;div id="child"&gt;&lt;/div&gt;&lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  <p>However, when the parent element is the <code>&lt;body&gt;</code> tag, this no longer behaves as expected:</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>body {
    background: rgba(33, 33, 33, 0.7);
  }
  #child {
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
    z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="child"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://www.w3.org/TR/CSS2/visuren.html#z-index" rel="nofollow noreferrer">The CSS specification §9.9.1</a> states (emphasis mine):</p>
  <blockquote>
  <p><strong>The root element forms the root stacking context.</strong> Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example '<a href="http://www.w3.org/TR/css3-color/#transparency" rel="nofollow noreferrer">opacity</a>'<a href="http://www.w3.org/TR/CSS2/refs.html#ref-CSS3COLOR" rel="nofollow noreferrer"> [CSS3COLOR]</a>.</p>
  <p>Within each stacking context, the following layers are painted in back-to-front order:</p>
  <ol>
  <li><strong>the background and borders of the element forming the stacking context</strong>.</li>
  <li><strong>the child stacking contexts with negative stack levels (most negative first).</strong></li>
  <li>the in-flow, non-inline-level, non-positioned descendants.</li>
  <li>the non-positioned floats.</li>
  <li>the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.</li>
  <li>the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.</li>
  <li>the child stacking contexts with positive stack levels (least positive first).</li>
  </ol>
  </blockquote>
  <p>If <code>&lt;body&gt;</code> were the root element, then this behavior would make sense, since that would mean that the <code>&lt;body&gt;</code> element is always painted first no matter what.</p>
  <p>However, in an HTML document, <code>&lt;html&gt;</code> is the root element. Given that, why can't we place an element under <code>&lt;body&gt;</code> with the <code>z-index</code> style?</p>
  <hr />
  <p>(This question was motivated by a <a href="https://ru.stackoverflow.com/q/444089/176684">similar question on the Russian Stack Overflow site</a>.)</p>