为什么位置：相对；似乎改变了z-index？

Question

因此，我有此标记，并且在其内部<div class="mask"></div>设置了图像顶部的蓝色叠加层。

如果我不制作.container position:relative，标题文本将隐藏在蓝色层的后面…好像它的用法在模仿z-index

为什么会这样呢？

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 class="mask"></div>

  <div class="container">

    <h1>Hello World</h1>

  </div>

</section>

Answer 1

您需要参考规范，更确切地说是绘画顺序，以了解何时打印每一层。

在没有position:relative元素的情况下，未放置元素并将在步骤（4）中进行打印：

1. 对于其所有 流入的，未定位的， 块级的树状后代：如果元素是块，列表项或其他等效块：
   
   

然后.mask在步骤（8）中打印定位的元素（包括）

1. 树状排列的所有 定位 ，不透明或转换后代，属于以下类别
   
   

现在，当您添加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（负数或正数），也会影响绘画顺序，在这种情况下，树形顺序将无效。

1. 堆叠由具有负z索引（不包括0）的后代按z索引顺序（最负数先）然后按树序形成的上下文
   

....

1. 堆叠上下文，这些上下文由定位的后代（z索引大于或等于1）按z索引顺序（最小的顺序为小）然后按树顺序形成。
   

我们z-index在（3）处打印带有负数的元素，并在（9）处打印带有正数的元素，在这些步骤之间，我们得到了所有z-index不涉及如最初描述的情况。