带有伪元素的Z-index

Question

我创建了一个带有before-pseudo元素的'header'元素.pseudeo元素必须位于父元素后面.一切都很好,直到我给'标题'一个z-index.

我想要的是:前景中的黄色"标题",背景中的红色伪元素以及黄色"标题"元素上的简单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伪元素放在header元素中.

CSS规范:

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

设置header元素的z-index 会创建一个新的Stacking Context,因此您创建的新伪元素不能浮动在header元素后面,因为它必须超出Stacking Context.

我建议您只需将header元素放在另一个元素之前,因此默认情况下它会正确堆叠.例子.