为什么 position:relative;似乎改变了 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

这是一个有趣的问题。看起来当 .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>

Answer 2

您需要参考规范，更准确地说是 painting order 以了解何时绘制每一层。

如果没有 position:relative，您的元素将不会定位并将在步骤 (4) 中绘制：

For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block equivalent:

然后我们在步骤(8)

绘制定位元素（包括.mask）

All positioned, opacity or transform descendants, in tree order that fall into the following categories

现在，当您添加 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) 它也说 opacity 或 transform 这意味着如果您还更改容器的不透明度或添加转换，顺序将改变也是。

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（无论是负值还是正值），您也会影响绘画顺序，在这种情况下，树顺序将不起作用。

Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order

....

Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order.

我们在 (3) 处用负值 z-index 绘制元素，在 (9) 处用正值绘制元素，在这些步骤之间，我们遇到了 z-index 不涉及的所有情况，如最初描述的那样。

为什么 position:relative;似乎改变了 z-index？

Why does position:relative; appear to change the z-index?

html

css

z-index

css-position