6

Why in IE8, is the background color of a pesudo element flowing behind children of the parent? The text flows in front, but the background-color does not. Z-index did not seem to help any.

I haven't been able to determine if this is a bug in IE8 or not. It seems like this would have been a pretty common use-case, but I couldn't find many blog posts or SO questions related to it.

http://jsfiddle.net/VAg2E/

    <div id="parent">
       <img src="http://placehold.it/200x200">
    </div>


    #parent{ padding: 20px; }
    #parent:before{
       content: 'Behind the image';
       position: absolute;
       top: 0;
       left: 0;   
       width: 100px;
       height: 100px;
       background-color: red;
    }

Edit : A related Stack Overflow Question about Stacking Order

Community
  • 1
  • 1
Robert
  • 1,132
  • 2
  • 11
  • 26

3 Answers3

6

This is definitely a bug in IE8; since your :before pseudo-element is positioned, it should create a new stacking context and always be drawn on top of the img unless you give it a negative z-index (even then, the entire element should be drawn behind it, not just its background).

This issue also seems specific to stacking between :before and :after pseudo-elements and replaced elements like img. It looks like IE8 is treating replaced content differently in terms of stacking, but whatever it is doing, it's definitely not conforming to the spec.

As you're probably aware, this is fixed in IE9.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • It just seems really strange that the text would render in front, and only the background behind. – Robert Dec 14 '12 at 14:31
  • @Robert: I think IE is treating the image as a background of a descendant inline box, and the absolutely-positioned pseudo-element as an inline element in the same stacking context, subjecting them to [some pretty counter-intuitive stacking rules that only start to make sense after closer examination](http://stackoverflow.com/questions/11088176/before-pseudo-element-stacking-order-issue/11088328#11088328)... except it's applying those rules completely wrongly. – BoltClock Dec 14 '12 at 15:09
  • If I understand that link, and IE8 is painting the image as a background layer, then using :after should paint the background in front of the image but alas, it's still behind. – Robert Dec 14 '12 at 16:14
  • Bummer - This answer explains the root of the problem, so I'm going to accept it as the answer, but I'm hoping somewhere there is a workaround that will solve the problem too. Hopefully! – Robert Dec 14 '12 at 16:19
2

Have your exact same issue, the only thing you can do is force the stacking order via CSS and z-index. The only catch is that z-index is placed on child element starting from parent element, so you wont be able to do a proper logic order as #parent-element {z-index: 2} and #child-element {z-index: 1}, the z-index for the #child-element will just be set to level 1 as a separate stack order inside the #parent-element.

You can still set z-index for the #child-element with a -1 value, it will just get back the whole #parent-element stacking order.

So to recap:

#parent-element { z-index: 99;} /* or any arbitrary number fitting */
#child-element {z-index: -1;}

Also remember to give both elements a position: relative/absolute to enable the stacking order fo z-index

Gruber
  • 2,196
  • 5
  • 28
  • 50
0

IE8 only supports pseudos if <!DOCTYPE> is declared. Source

    #parent { padding: 20px; z-index: 2; }
    #parent:before {
       content: 'Behind the image';
       position: absolute;
       top: 0;
       left: 0;   
       width: 100px;
       height: 100px;
       background-color: red;
       z-index: -1;
    }​
bobthyasian
  • 933
  • 5
  • 17
  • Although correct, it's not the issue described here, the Doctype is declared in the jsFiddle (and in the site I'm working on), and the pseudo element renders, but the background of the pseudo element flows behind children images. – Robert Dec 13 '12 at 19:56
  • 1
    Changing `position: absolute` to `position: relative` seems to have fixed it. – bobthyasian Dec 13 '12 at 19:59
  • With position: relative; it renders the element in front, but it still remains part of the layout flow. – Robert Dec 13 '12 at 20:03
  • What does `z-index` have to do with the doctype? – BoltClock Dec 14 '12 at 05:56