IE8之前的元素与绝对子元素

Question

我有一个div，一个：前元素和内元素。一切正常，除了一个内部元素定位absolute。

使用z-index，可以将绝对元素放在：before-element后面。这在IE8中不起作用，如IE8 z-index on before and after css selectors中所述。如该帖子所述，可以使用position: relative来解决问题。但由于我的元素已定位absolute，我无法做到这一点。那么我该怎么办呢？

我创建了一个小提琴http://jsfiddle.net/2Zcr9/4/来显示我的问题（对于IE8，转到http://jsfiddle.net/2Zcr9/4/embedded/result/，因为jsfiddle不再支持IE8。）

---

编辑：改变了链接，因为Paul_D指出我的小提琴错了+图片 看到不同。如果z-index较低，普通浏览器会在:before-element后面获得黄色绝对元素，但IE8拒绝这样做。

Answer 1

我明白了。当给予黄色元素一个负z-索引时，它的父级是正z-index而:before-element是一个更高的z-index，:before-element堆栈最高，即使在IE8中也是如此。另见：http://jsfiddle.net/2Zcr9/23/。

注意.icon和p之间的区别。 P仍然在IE9中高于:before-element，因为它没有负z-索引。

---

更加全球化：在经过多次尝试和错误之后，我逐渐明白阴影dom总是低于IE8中的孩子。

一个例子：

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

:before和:after元素的堆叠低于resp。 ＃child1和＃child2。可以通过应用以下CSS来解决这个问题：

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