Pseudo element on parent hidden behind child image on IE8
css, internet-explorer-8, pseudo-element
Solution
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.
Problem
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