title: Z-index not working with position:fixed pseudo-elements
body: <p>I've researched a lot on the topic and generally most problems of this matter are solved by specifying of changing the <code>position</code> attribute. However, the situation is different when dealing with pseudo-elements. The following CSS is the reduced test case.</p>
  
  <pre><code>#div {
     background: #f5f;
     height: 80vw;
     width: 80vw;
     max-height: 50px;
     max-width: 50px;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);    
  }
  
  #div:before {
     content: '';
     background: #000;
     height: 100vw;
     width: 100vw;
     max-height: 100px;
     max-width: 100px;
     position: fixed;
     top: 50%;
     left: 50%;
  
  
  transform: translate(-50%, -50%);
     z-index: -1;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="div"&gt;hi!&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Kq2PY/165/" rel="nofollow">Fiddle</a></p>