title: Z-index with before pseudo-element
body: <p>I've created a 'header' element with a before-pseudo element. the pseudeo element must be behind the parent element.
  Everything works great till the moment I give my 'header' a z-index.</p>
  
  <p>What I want: The yellow 'header' on the foreground, the red pseudo-element in the background and a simple z-index of 30 on the yellow 'header' element.</p>
  
  <pre><code>header { 
      background: yellow;
      position:relative;
      height: 100px;
      width: 100px;
      z-index:30; /*This is the problem*/
  }
  
  header::before { 
      content:"Hide you behind!";
      background: red;
      position:absolute;
      height: 100px;
      width: 100px;
      top:25px;
      left:25px;
      z-index:-1;
  }
  </code></pre>
  
  <p>You can test my problem on this link (<a href="http://jsfiddle.net/tZKDy/">http://jsfiddle.net/tZKDy/</a>) and you see the problem when you set/remove the z-index on de 'header' element.</p>