Z-index与之前的伪元素

我已经用before-pseudo元素创建了'header'元素。 pseudeo元素必须位于父元素的后面。一切都很好，直到我给我的'标题'一个Z索引。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/）上的问题，你看到的问题，当你设置/删除去“头”元素的z-index的。

来源

2011-10-19 Tom Claus

“我想要的：前景中的黄色'标题'，背景中的红色伪元素以及黄色'标题'元素上简单的z-index 30”。 ...“一切工作都很好，直到我给我的标题”z-index“这个时候，这听起来像是当你应用z-index时发生的事情。z-index应用有什么问题？ – albert

::之前的伪元素放置在标题元素内。

CSS Spec：

的：前和：后，如果他们刚好插入其相关联的元素中实元素伪元素与其他框交互。

设置的z-index为头元素creates a new Stacking Context，所以不能浮在头元素后面创建的新的伪元素，因为它会到堆叠内容外去。

我建议你简单地在头元素前面加上另一个元素，所以默认情况下它是正确堆叠的。 Example。

来源

2011-10-19 14:31:39

不幸的是，例子中断：CSS在第一条规则中缺少一个右大括号。我[分叉和固定]（http://jsfiddle.net/dland/xs2b68ub/2/）它。 –

Z-index与之前的伪元素

回答

相关问题