css - Z-index with before 伪元素

Question

我创建了一个带有 before-pseudo 元素的“header”元素。伪元素必须在父元素之后。一切都很好，直到我给“标题”一个 z-index 的那一刻。

我想要的是:前景中的黄色“header”，背景中的红色伪元素以及黄色“header”元素上简单的 z-index 30。

header { 
    background: yellow;
    position:relative;
    height: 100px;
    width: 100px;
    z-index:30; /*This is the problem*/
}

header::before { 
    content:"Hide you behind!";
    background: red;
    position:absolute;
    height: 100px;
    width: 100px;
    top:25px;
    left:25px;
    z-index:-1;
}

您可以在此链接 (http://jsfiddle.net/tZKDy/) 上测试我的问题，当您设置/删除 de 'header' 元素上的 z-index 时，您会看到问题。

Answer 1

::before 伪元素放置在标题元素内。

CSS Spec :

The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.

为标题元素设置 z-index creates a new Stacking Context ，因此您创建的新伪元素不能 float 在标题元素后面，因为它必须超出该堆叠上下文。

我建议您只需在 header 元素之前添加另一个元素，这样默认情况下它就会正确堆叠。 Example .