HTML pseudo elements placed over actual child nodes
<p>For some reason, when an element's pseudo child node is added, its z-index is higher than its child nodes, even though its a <code>::before</code> element, which appears before the relative child nodes, but doesn't display that way. Why does this happen, and is there a way to fix it?</p>

<p>Here's an example where the child <code>&lt;h1&gt;</code> node <em>should</em> appear as if it's hovering over the black pseudo element, but that isn't the case.</p>

<p><a href="https://jsfiddle.net/9u33vko0/" rel="nofollow">https://jsfiddle.net/9u33vko0/</a></p>

<p>Is my understanding just fundamentally wrong?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  width: 100%;
  padding: 40px 0;
  border: 1px solid #DDD;
  text-align: center;
  color: #FFF;
  position: relative;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #000;
  width: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;h1&gt; &lt;!-- should appear above the black ::before element --&gt;
    Hello, World!
  &lt;/h1&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>