带有伪元素之前的 Z 索引

Question

我创建了一个带有 before-pseudo 元素的“header”元素。伪元素必须位于父元素后面。 一切都工作得很好，直到我给我的“标题”一个 z 索引。

我想要的：前景中的黄色“标题”，背景中的红色伪元素以及黄色“标题”元素上的简单 z 索引 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/）上测试我的问题，当您设置/时您会看到问题删除“header”元素上的 z 索引。

Answer 1

::before 伪元素放置在 header 元素内。

CSS 规范：

:before 和 :after 伪元素与其他框交互，就好像它们是插入到其关联元素内的真实元素一样。

设置 header 元素的 z-index 创建一个新的 Stacking Context，因此您创建的新伪元素不能浮动在 header 元素后面，因为它必须位于 Stacking Context 之外。

我建议您只需在标头元素之前添加另一个元素，以便默认情况下它可以正确堆叠。 示例。

Answer 2

我使用了 z-index:-1 (在此处输入链接描述)

a {
    position: relative;
    z-index: 1;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: yellow;
    z-index: -1;    
}