css - :after : z-index 不起作用

Question

我想将黑色矩形 (:after) 放在 h2 后面，但 z-index 不起作用。

我在 html 中有这段代码

  <h2>Ce que tu auras peut-être un jour ou l'autre...</h2>

这在 CSS 中：

#general .page h2 {
position: relative;
text-indent: -9999px;
width: 718px;
margin-bottom: 50px;
height: 116px;
z-index: 10;
background: url(img/banniere-hi-04.png);
}

#general .page h2:after {
display: block;
content: "";
position: absolute;
top: -15px;
left: 658px;
width: 544px;
height: 72px;
z-index: -1;
background: black;
}

这是问题所在（这里有一个黑色矩形）： http ://www.robinmastromarino.be/dataviz04/

感谢您的帮助 ！

Answer 1

您需要给出<div class="page">一个相对位置和一个正 z-index，然后删除 z-index 上<h2>的伪元素创建一个新的堆叠上下文

有关原因的更多信息

---

例子：

Answer 2

您不能给子节点的 z-index 低于其父节点。