This doesn't make sense to me. Shouldn't ::before get rendered before the span? It works if I add position:relative to the child element.
This could have something to do with the stacking context, but I'm not sure how exactly.
https://www.w3.org/TR/CSS21/visuren.html#layers
The span in this case falls in #3 because it's non-positioned and ::before #6 because it's a positioned descendant?
div { position:relative; }
div:before {
content: '';
width: 100%;
height: 100%;
background: red;
position: absolute;
top: 0;
left: 0;
}
/* Adding this works: */
/* span { position: relative; } */
<div>
<span>Test</span>
</div>
position:absolute
so it is being placed exactly where you tell it, i.e. in the top left corner. – FluffyKitten Oct 21 '17 at 13:06z-index
value other thanauto
, like-1
, you will create a stacking context, and the:pseudo-element
will appear below the siblingspan
element. Without az-index
value declared, the absolutely positioned element will always appear above any "un-positioned" elements orstatic
elements (e.g:position: static
) - which is generally the default positioning of any element. – UncaughtTypeError Oct 21 '17 at 13:33