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

Question

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

我的#generateddiv 的 az-index为 1，而伪元素的 az-index为 -1 ，但只显示 div 文本，而不是 div 出现在生成的内容上方，就像我预期的那样。此外，如果我给伪元素一个正的 z-index 和 div 一个更大的 z-index，那么伪元素后面的<div>剩余部分..

谁能解释为什么会这样？

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#generated内部，而不是在 div#generated 本身之后。

考虑到这一点，堆叠上下文是不言自明的：伪元素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 索引沿 z 轴筛选。由于节点文本及其容器位于同一 z 轴级别，因此生成的内容出现在容器和节点文本下方。

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

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

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