Css 伪元素前的Z索引

我用before伪元素创建了一个“header”元素。pseudeo元素必须位于父元素的后面。 一切都很顺利，直到我给我的“头”一个z指数

---

我想要的是：前景中的黄色“header”，背景中的红色伪元素，黄色“header”元素上的简单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时，您就会看到问题。

将：：before伪元素放置在header元素中

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;
}

:

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

为header元素设置z索引，这样您创建的新伪元素就不能浮在header元素后面，因为它必须超出堆栈上下文

我建议您只需在header元素前面加上另一个元素，这样它在默认情况下就可以正确地堆叠

我使用了z指数：-1（）

---

“我想要的是：前景中的黄色‘header’，背景中的红色伪元素，黄色‘header’元素上的简单z索引为30。”。。。“在我给‘我的头’一个z指数之前，一切都很顺利“这听起来像是应用z索引时发生的情况。应用z索引有什么问题？不幸的是，这个示例被破坏了：CSS在第一条规则中缺少一个右括号。我认为这不是一个好的解决方案，因为我看不到使用相对绝对定位的意义，而事实上它们不是相对定位的。例如，添加一个

left:50px

会破坏它。欢迎使用堆栈溢出。您的答案看起来像是使用了CSS预处理器，可能是SCSS，但最初的问题只使用了CSS。你能在你的回答中澄清一下吗，或者把它格式化成CSS格式吗？