HTML pseudo elements placed over actual child nodes - html

Question

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 ::before 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?
Here's an example where the child <h1> node should appear as if it's hovering over the black pseudo element, but that isn't the case.
https://jsfiddle.net/9u33vko0/
Is my understanding just fundamentally wrong?
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%;
}
<div>
<h1> <!-- should appear above the black ::before element -->
Hello, World!
</h1>
</div>

Answer 1

Even though the :before pseudo element appears before the h1 element in the DOM, it will still overlap the h1 element because it establishes a stacking context due to the fact that it is positioned (with position: absolute).
Here is a relevant quote from the CSS2 specification on stacking contexts (painting order; point 8)
All positioned descendants with z-index: auto or z-index: 0, in tree order. For those with z-index: auto, treat the element as if it created a new stacking context ...
Therefore you could establish a stacking context with the h1 element by positioning it (i.e., by adding position: relative). In doing so, the h1 element will be placed above the :before pseudo element because it appears after the pseudo element in the DOM and both elements are positioned with a z-index of auto.
Updated Example
h1 {
position: relative;
}
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%;
}
h1 {
position: relative;
}
<div>
<h1>Hello, World!</h1>
</div>
Of course, you could also just give the pseudo element a negative z-index, but that's besides the point. When it comes down to it, establishing a stacking context is enough since the :before pseudo element appears before the h1 element in the DOM (as you have already pointed out).