Question

这是我的jsfiddle：http://jsfiddle.net/vSJnL/4/

我的#generated div的z-index为1，而伪元素的z-index为-1 ，但只显示div文本而不是div出现在生成内容之上，就像我预期的那样。另外，如果我给伪元素一个正z-index而div给一个更大的z-index，那么<div>仍然是behind the pseudo-element ..

任何人都可以解释为什么会这样吗？

Answer 1

假设您的内容不是空的（为清晰起见），即content: "generated";：http://jsfiddle.net/vSJnL/5/

然后它会呈现如下：

<div id="over">
    <div id="generated">
    Hello World!
    <span>generated</span>
    </div>
</div>

请参阅http://jsfiddle.net/vSJnL/6/

请参阅w3c上的规范：http://www.w3.org/TR/CSS21/generate.html#before-after-content

因此，生成的元素位于文本节点之后生成的div＃内，而不是在div生成之后。

考虑到这一点，堆叠上下文是不言自明的：带有z-index: -1的伪元素成为最低堆叠位置（只有背景位于下方）。结果Textnode覆盖了伪元素。

Answer 2

我试验了你的HTML元素：

<div id="over" class="case{0,1,2}">
    <div class="generated">Hello World!</div>
</div>

使用以下CSS查看了3个案例。我稍微改变了生成内容的样式，仅用于演示：

.generated {
    background-color: gray;
    border: 1px dotted black;
    color: white;
    width: 20rem;
    position: relative;
}
.generated::after {
    content:"\00A0";
    display: block;
    width: 0;
    height: 0;
    border-width: 20px;
    border-color: khaki blue khaki red;
    border-style: solid;
    position: absolute;
    left: 0;
    top: 0;
}

.case0 .generated {
}
.case0 .generated::after {
}

.case1 .generated {
}
.case1 .generated::after {
    z-index: -1;
}

.case2 .generated {
    z-index: 200
}
.case2 .generated::after {
    z-index: -1;
}

默认情况下，我没有设置z-index，并且生成的内容会在文本注释内容上滑动，只是使用绝对定位重叠内容。

在案例1中，将z-index: -1应用于生成的内容，并将其移至元素下方。

在案例2中，将z-index: 200（或任何数字1或更大）应用于.generated和z-index: -1到生成的内容，在这种情况下，生成的内容出现在节点文本之间和元素。

在案例1中，您只是将生成的内容1的z-index向下筛选到z轴。由于节点文本及其容器位于同一z轴级别，因此生成的内容将显示在容器和节点文本下方。

在第2种情况下，您将节点文本从其容器中移出，然后将生成的内容在节点文本下方向下移动1，因此生成的内容位于容器上方但低于节点文本。

这可能是一种有用的CSS技术。

小提琴参考：http://jsfiddle.net/audetwebdesign/9sR8B/

不了解伪元素的堆叠上下文

2 个答案: