带有前伪元素的Z索引

Question

我用一个pre-pseudo元素创建了一个’header’元素。pseudeo元素必须位于父元素之后。一切正常，直到我给我的“页眉”添加z-index为止。

我想要的是：前景上的黄色“标头”，背景上的红色伪元素以及黄色“标头”元素上的简单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;
}

您可以在此链接）上测试我的问题，当您在de’header’元素上设置/删除z-index时，您会看到问题。

Answer 1

:: before伪元素位于标头元素内。

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

为header元素设置z-index 会创建一个新的StackingContext，因此您创建的新伪元素不能浮在header元素后面，因为它必须超出该StackingContext范围。

我建议您仅在header元素之前添加另一个元素，因此默认情况下它可以正确堆叠。