您需要参考规范，更确切地说是绘画顺序，以了解何时打印每一层。
在没有position:relative元素的情况下，未放置元素并将在步骤（4）中进行打印：
然后.mask在步骤（8）中打印定位的元素（包括）
现在，当您添加position:relative容器时，将容器也放置在这样的位置，因此它也将落入步骤（8）中，并且如此处所述，因为两者均未指定，所以我们考虑树的顺序z-index。因此，.container在这种情况下，将打印遗嘱。
如果更改元素的顺序（在遮罩之前制作容器），您会注意到这position:relative没有任何效果，因为在两种情况下，绘画顺序都是相同的：
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
position: relative; /* you can remove this*/
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="container">
<h1>Hello World</h1>
</div>
<div class="mask"></div>
</section>
如果我们检查步骤（8），它也表示 不透明度或转换 ，这意味着如果您还更改了容器的不透明度或添加了转换，则顺序也会更改。
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
transform:translate(0); /*added this*/
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>
要注意的是，如果添加z-index（负数或正数），也会影响绘画顺序，在这种情况下，树形顺序将无效。
....
我们z-index在（3）处打印带有负数的元素，并在（9）处打印带有正数的元素，在这些步骤之间，我们得到了所有z-index不涉及如最初描述的情况。
602392714
清零编程群