IE8 before element with absolute child

Question

I got a div, a :before-element and inner elements. Everything works fine, except one inner element is positioned absolute .

Using z-index, it's possible to position the absolute element behind the :before-element. This does not work in IE8, as posted in IE8 z-index on before and after css selectors . As mentioned in that post one could use position: relative to fix the problem. But as my element is already positioned absolute , there is no way I could do that. So what can I do to fix this?

I create a fiddle http://jsfiddle.net/2Zcr9/4/ to show my problem (for IE8, go to http://jsfiddle.net/2Zcr9/4/embedded/result/ , as jsfiddle no longer supports IE8).

---

Edit: Changed the links, as Paul_D pointed out that my fiddle was wrong + picture See the difference. Normal browsers got the yellow absolute element behind the :before-element if z-index is lower, but IE8 refuses to do that.

Answer 1

I figured it out. When given the yellow element a negative z-index, it's parent a positive z-index and the :before-element a higher z-index, the :before-element stacks as highest, even in IE8. See also: http://jsfiddle.net/2Zcr9/23/ .

Notices the difference between .icon and p. P still stackes above the :before-element in IE9, as it has not a negative z-index.

---

To be more global: after much trying and error I came to understand that the shadow dom is always stacked lower than the children in IE8.

An example:

<div id="parent">
     :before
     <div id="child1"></div>
     <div id="child2"></div>
     :after
</div>

the :before and :after elements are stacked lower than resp. #child1 and #child2. One could fix that by applying following CSS:

#parent { position: relative; z-index: 2 }
#parent:before { position: absolute; z-index: 3; ... }
#parent > * { position: relative; z-index: -1 }