unable to make an absutely positioned pseudo element appear in front of its parent

Question

I am trying to add a pseudo element beneath its parent. Both are absolutely positioned, but the pseudo element persists in stacking above its parent.

Here is a jsfiddle.

HTML:

<div></div>

CSS

div{
    position: absolute;
    top: 10px;
    left: 10px;
    height: 20px;
    width: 20px;
    background: red;
    z-index: 10;
}
div:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 40px;
    background: blue;
    z-index: 1;
}

Answer 1

You just need to add another parent with a z-index of 1 and relative positioning.

Example: http://jsfiddle.net/D6mwn/1/

Read more: Is it possible to set the stacking order of pseudo-elements below their parent element?