您需要参考规范，更确切地说是绘画顺序，以了解何时打印每一层。
在没有
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; 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 > <h1>Hello World</h1> </div> <div ></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); 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 ></div> <div > <h1>Hello World</h1> </div></section>要注意的是，如果添加
z-index（负数或正数），也会影响绘画顺序，在这种情况下，树形顺序将无效。
- 堆叠由具有负z索引（不包括0）的后代按z索引顺序（最负数先）然后按树序形成的上下文
....
- 堆叠上下文，这些上下文由定位的后代（z索引大于或等于1）按z索引顺序（最小的顺序为小）然后按树顺序形成。
我们
z-index在（3）处打印带有负数的元素，并在（9）处打印带有正数的元素，在这些步骤之间，我们得到了所有
z-index不涉及如最初描述的情况。
