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 Spec：

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

设置头元素creates a new Stacking Context的z-index，因此您创建的新伪元素不能浮动在header元素后面，因为它必须超出Stacking Context。

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

Answer 2

我使用了z-index：-1（enter link description here）

a {
    position: relative;
    z-index: 1;
    text-align: center;
    display: table-cell;
    vertical-align: middle;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: $secondryColor;
        z-index: -1;
    }   
}

带有伪元素的Z-index

2 个答案: