我创建了一个带有before-pseudo元素的“header”元素。该假元素必须在父元素之后。
一切都很好，直到我给我的“头”一个z指数。
一切都很好，直到我给我的“头”一个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/)上测试我的问题，并且您在de’header’元素上设置/删除z-index时会看到问题。
解决方法
:: before伪元素放置在头元素内。
The :before and :after pseudo-elements interact with other Boxes as if they were real elements inserted just inside their associated element.
设置头元素creates a new Stacking Context的z-index，因此您创建的新伪元素不能浮动在头元素后面，因为它必须在该堆叠上下文之外。
