Z-index与before伪元素 [英] Z-index with before pseudo-element

问题描述

我创建了一个带有before-pseudo元素的'header'元素。伪元素必须在父元素之后。
一切正常，直到我给我的'header'一个Z-索引。

I've created a 'header' element with a before-pseudo element. the pseudeo element must be behind the parent element. Everything works great till the moment I give my 'header' a z-index.

我想要的：前景上的黄色红色伪元素和在黄色'header'元素上的简单z索引30。

What I want: The yellow 'header' on the foreground, the red pseudo-element in the background and a simple z-index of 30 on the yellow 'header' element.

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时出现的问题。

You can test my problem on this link (http://jsfiddle.net/tZKDy/) and you see the problem when you set/remove the z-index on de 'header' element.

推荐答案

:: before伪元素放置在标题元素内。

The ::before pseudo-element is placed inside the header element.

CSS规格：

：before和：after伪元素与其他框相互作用，就好像它们是在其关联元素内部插入的真实元素。

The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.

设置标题元素的z-index 创建一个新的堆叠上下文 ，所以你创建的新的伪元素不能浮在标题元素后面，因为它必须在堆叠上下文之外。

Setting the z-index for the header element creates a new Stacking Context, so the new pseudo element you created can not float behind the header element, because it would have to go outside that Stacking Context.

我建议你只是先于标题元素，所以它默认正确堆叠。 示例。

I suggest that you simply precede the header element by another element, so it stacks correctly by default. Example.

这篇关于Z-index与before伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！