Html 带有绝对子元素的IE8 before元素

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

绝对位置

使用z索引，可以将绝对元素定位在：before元素后面。这在IE8中不起作用，如中所述。正如在那篇文章中提到的，我们可以使用

position:relative

来解决这个问题。但是，由于我的元素已经定位为绝对的，所以我无法做到这一点。那么我能做些什么来解决这个问题呢

我创建了一个提琴来显示我的问题（对于IE8，请转到，因为JSFIDLE不再支持IE8）

---

编辑：更改了链接，因为Paul_D指出我的小提琴错了+图片

---

看到区别了吗。普通浏览器在

：before元素后面有一个黄色的绝对元素，如果z-index较低，但IE8拒绝这样做。
我找到了答案。当给黄色元素一个负z指数时，它的父元素是正z指数，
：before元素
的z指数更高，
：before元素
的z指数最高，即使在IE8中也是如此。另见：

注意到.icon和p之间的差异。P仍然堆叠在IE9中元素

之前的

：上方，因为它没有负z指数


更具全局性：经过多次尝试和错误之后，我开始理解阴影dom的堆叠总是低于IE8中的子级

例如：

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

JSFIDLE没有
：before
伪元素，尽管它有一个
：after
。我仍然不知道你想做什么。呜呜，我错了。这应该是一个
：之前的
。公平地说，我不在乎瘦套件，但我看不出问题出在哪里。你有没有关于IE8的图片，因为我在IE11的IE8“模式”中看不到任何问题。我仍然很难弄清楚你想做什么。
#parent { position: relative; z-index: 2 }
#parent:before { position: absolute; z-index: 3; ... }
#parent > * { position: relative; z-index: -1 }