我用一个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时，您会看到问题。