为什么位置：相对;似乎改变了z指数？

Question

所以我有这个标记，在里面有<div class="mask"></div>，它设置图像顶部的蓝色覆盖。

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

为什么会这样？

笔：https://codepen.io/anon/pen/OBbbZB

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

您需要参考规范，更准确地说是painting order，以了解何时打印每个图层。

如果没有position:relative，您的元素将无法定位并将在步骤（4）中打印：

4. 对于树中顺序的所有流入，非定位，块级后代：如果元素是块，列表项或其他等效块：

然后我们在步骤（8）中打印定位的元素（包括.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（负面或正面）也会影响绘制顺序，在这种情况下，树顺序将不起作用，这也是微不足道的。

3. 堆叠上下文由z-index顺序为负z-索引（不包括0）的后代形成（最多为负数）然后是树顺序

....

9. 堆叠由z-index顺序（最小的第一个）的z-indices大于或等于1的定位后代形成的上下文，然后是树顺序。

我们在（3）处打印负z-index元素，在（9）处打印正面元素，在这些步骤之间打印所有z-index未涉及的情况，如初始描述。

Answer 2

这是一个引人入胜的问题。看起来当.mask div是绝对的并从文档流中取出时，它是受影响的位置，但元素的堆叠顺序仍然存在。所以放在绝对div之前的元素出现在div之下，而放在绝对div之后的元素则堆叠在之后。

这不是一个真正的答案，我只想演示我看到的内容：

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;
}

.container0 {
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.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="container0">
    <h1>Another Hello World</h1>
  </div>
  <div class="mask"></div>
  <div class="container">
    <h1>Hello World</h1>
  </div>
</section>