html - IE8 z-index on before and after css selectors

Question

This is very frustrating....

http://jsfiddle.net/RRnm8/

<div id="target">
    <p>Text to appear in front</p>
</div>

#target {
    position: relative;
    background: red;
    width: 200px;
    height: 200px;
    padding: 45px;
}

#target:before {
    content: "content from before, should be behind #target";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100%;
    height: 100%;
    background: cyan;
    z-index: -1;
}

works well on every browser, except for IE8...

it should be displayed like this:

But in IE8 you get this :'(

So the question would be how to get this to work properly in IE8?

Please provide the answer as a real working example at jsfiddle...

This user has the exact same problem. He got no answer but this which clearly doesn't work, hence my kind request for a working example demonstrating it on jsfiddle

Answer 1

This issue appears to be related to how IE handles the z-index stack. Where FF and Chrome treats elements with z-index document-wide, in IE, as you likely know, z-index is based upon the parent's z-index first.

I think the :before content complicates this issue and, despite it having a negative z-index, is it within the parent element. The element its index is being compared with is not the parent div, as it would be in FF or Chrome, but the content inside the div, the p element. The p element is not a block and shares the z-index of the parent div as well, so it cannot be below the :before content.

The solution is to make an inner div, or give the p element relative positioning and styling.

See: http://jsfiddle.net/RRnm8/3/