关于background overlay与z-index的疑问：z-index:-1遮罩为何仍可见？

实现代码 #

HTML 代码

<section id="hero">
        <div class="hero container">
            <div>
                <h1>Hello, My Name is </h1>
                <a href="#" type="button" class="cta">Porfolio</a>
            </div>
        </div>
</section>

CSS 代码

.container {
    background-image: url(./img/someimg.jpg);
    background-size: cover;
    background-position: top center;
    position: relative;
    z-index: 1;
}

.container::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: .7;
    z-index: -1
}

疑问解答 #

• 为什么遮罩（.container::after）的z-index设为-1还能显示？
  伪元素是.container的子元素，z-index的层级是相对父元素的堆叠上下文而言的。.container设置了position: relative和z-index:1，相当于创建了一个独立的堆叠上下文（可以理解为专属的“层级舞台”）。在这个舞台里，伪元素的z-index:-1是舞台内的最底层，但父元素的背景图片本身属于元素的“背景层”，比舞台内所有子元素的层级都低。所以伪元素哪怕z-index为-1，也会盖在背景图片之上，同时低于父元素内的文本、按钮等内容，因此能正常显示遮罩效果。

• 为什么只有文本和锚点标签能在遮罩之上（看起来像是获得了z-index:1的层级）？
  首先，.container的z-index:1是用来和页面中其他同级元素（比如相邻的section、div）比拼层级的，不是直接传给子元素。而父元素内的文本、锚点等子元素，默认处于父元素堆叠上下文的“内容层”，这个层级在父元素内部天然高于伪元素（z-index:-1）。加上伪元素是绝对定位但z-index在父元素的堆叠上下文里更低，所以文本和锚点能显示在遮罩上方，并且不会被伪元素遮挡，保持可点击状态。

内容的提问来源于stack exchange，提问作者JJ Cha