Z-index not working with position:fixed pseudo-elements - css

Question

I've researched a lot on the topic and generally most problems of this matter are solved by specifying of changing the position attribute. However, the situation is different when dealing with pseudo-elements. The following CSS is the reduced test case.
#div {
background: #f5f;
height: 80vw;
width: 80vw;
max-height: 50px;
max-width: 50px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#div:before {
content: '';
background: #000;
height: 100vw;
width: 100vw;
max-height: 100px;
max-width: 100px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
HTML
<div id="div">hi!</div>
Fiddle

Answer 1

Pseudo elements belongs to the element itself. So the z-index will work in all pseudo "childrens", but not in the parent because is not in the same stack.
It's like when you want to change the z-index to put a div over another div but first is the parent of the second:
div {position:relative;}
.parent {z-index:10; background:red; padding: 5px;}
.children {z-index:5; background:blue;}
<div class="parent">
I need this more z-index than his children
<div class="children">
I need this less z-index than his parent
</div>
</div>
It doesn't work obviously. That's the same case.
To avoid this, you need to change your HTML and convert the pseudo element in a normal element with the propper stack.
EDIT
In your case, you can solve if you change the fixed positioning to the relative positioning:
http://jsfiddle.net/Kq2PY/166/
But this is a particular case because the parent is fixed positioning, and it works going out of the normal flow (fixed elements are attached to the document, not the parent element). So avoid to make this kind of things when you can make with another ways.