css - :after : z-index doesn't work

我想将黑色矩形 (: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/

感谢您的帮助!

最佳答案

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

More info as to why

示例: