伪元素中的z-Index行为

Question

请参阅：

http://jsfiddle.net/Kq2PY/

div元素具有z-index值为5的相对定位，而:after伪类具有z-index值为2的绝对定位。

所以，:after不应该在div的后面吗？

div{
    position:relative;
    z-index: 5;
    background: #000;
    padding: 10px;
}    

div:after{
    content: '';
    position: absolute;
    z-index: 2;            /*  <= not working:( */
    background: #3d3;
    left: 20px;
    top: 20px; 
    width: 30px;
    height: 30px;
}    

<div>erferf</div>

- Alex

---

有趣的是，如果你将它设置为负数，它会显示在文本后面但在div背景前面:/ - chrisfrancis27

@Chris Francis：这个问题在 Stack Overflow 上有解答。 - BoltClock

@BoltClock 很好的参考，谢谢。 - chrisfrancis27

Answer 1

你需要给伪元素设置一个负的z-index让它处于父级元素之后，同时移除父级元素上的z-index属性。 http://jsfiddle.net/jklm313/Kq2PY/4/

div{
    position:relative;
    background: #000;
    padding: 10px;
}    

div:after{
    content: '';
    position: absolute;
    z-index: -1;            /*  <= not working:( */
    background: #3d3;
    left: 20px;
    top: 20px; 
    width: 30px;
    height: 30px;
}    

<div>erferf</div>

- carpenumidium

---

@Alex：这是正常行为，但大多数情况下都可以通过规范来解释。它提供了非常技术化的细节说明正在发生的事情... - BoltClock

我不认为这是一个 bug，因为在我测试的浏览器（IE9、Opera、Chrome、FF）中都是这样显示的。虽然这很荒谬。 - carpenumidium

如上所述，移除父元素的Z-index是很重要的，否则伪元素上的z-index将无法按预期工作。 - Samuel MacLachlan

某种方式对于固定定位的父元素不起作用..它只是在文本后面，而不是在元素本身后面。 :/ http://jsfiddle.net/jklm313/Kq2PY/4/ - Luckylooke

如上所述，删除父元素上的z-index以及任何其他可能创建堆叠上下文的属性（例如transform、filter等）都非常重要。 - Max

Answer 2

div { z-index: 1; }

div::after { z-index: -1;}

- Sport Director

---

你好，欢迎来到stackoverflow，并感谢您的回答。虽然这段代码可能回答了问题，但您是否可以考虑添加一些解释，说明您解决的问题以及如何解决它？这将有助于未来的读者更好地理解您的答案并从中学习。 - Plutian

我遇到的一个问题是，将 ::before 应用于一个被用作背景图片的元素会导致所有子元素（在背景图片容器标记内部的子元素）都被绘制在图像下面（透明度较低的图像），所以虽然我可以看到我想要点击的按钮，但实际上不能点击，因为它真正点击的是背景图片。当您只在伪元素上放置 z-index：-1; 时，它会隐藏图片，但是当您向父级添加 z-index：1; 时，它会同时显示...我也很困惑。 - Shmack