title: Why does z-index: -1; appear above z-index: 1;?
body: <p>Explain this behavior:</p>
  
  <pre><code>&lt;div style="z-index: 1"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>div {
     position: relative;
     background: red;
     width: 100px;
     height: 100px;    
  }
  
  div:before {
      position: absolute;
      background: blue;
      width: 100px;
      height: 100px;  
      z-index: -1;
      content: "";
      left: -5px;
      top: -5px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2VexH/2/" rel="noreferrer">http://jsfiddle.net/2VexH/2/</a></p>
  
  <p>Only difference is the first div has z-index: 1 set.</p>