title: z-index when using ::after under element
body: <p>If we use <code>z-index</code> combined with <code>position: absolute;</code> its possible to place the <code>::before</code> of a element under itself. There is a good example on <a href="https://stackoverflow.com/q/3032856/2256325">another question</a> (<a href="https://jsfiddle.net/Ldtfpvxy/" rel="nofollow noreferrer">jsfiddle.net/Ldtfpvxy</a>).</p>
  
  <p>Basically </p>
  
  <pre><code>&lt;div id="element"&gt;&lt;/div&gt;
  
  #element { 
      position: relative;
      width: 100px;
      height: 100px;
      background-color: blue;
  }
  
  #element::after {
      content: "";
      width: 150px;
      height: 150px;
      background-color: red;
  
      /* create a new stacking context */
      position: absolute;
      z-index: -1;  /* to be below the parent element */
  }
  </code></pre>
  
  <p>renders:</p>
  
  <p><img src="https://i.stack.imgur.com/jJVGu.png" alt="enter image description here"></p>
  
  <p>So the stacking context/order is defined by <code>z-index</code>. But when I apply <code>z-index: 1;</code> to the element and <code>z-index: -1;</code> to its <code>::before</code> I cannot achieve the same thing. </p>
  
  <p>Only if I omit <code>z-index</code> from the element. </p>
  
  <p>Any ideas why this is? Is the element rendered after its <code>::before</code> &amp; <code>::after</code> pseudos so they get the same <code>z-index</code>?</p>
  
  <p><strong>Working:</strong> <a href="https://jsfiddle.net/Ldtfpvxy/" rel="nofollow noreferrer">https://jsfiddle.net/Ldtfpvxy/</a><br>
  <strong>Not working:</strong> <a href="https://jsfiddle.net/Ldtfpvxy/1/" rel="nofollow noreferrer">https://jsfiddle.net/Ldtfpvxy/1/</a> (only added <code>z-index: 1;</code> to element)</p>