Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE8 z-index on before and after css selectors

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:

correct version

But in IE8 you get this :'(

wrong version

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

like image 230
zanona Avatar asked Apr 04 '11 14:04

zanona


1 Answers

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/

like image 129
smdrager Avatar answered Oct 05 '22 10:10

smdrager