IE8 z-index on before and after css selectors

Question

This is very frustrating....

http://jsfiddle.net/RRnm8/

    
Text to appea         


        
                      

              相关标签:
       
      

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/