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

Z时代
2024-01-10
分类：问答

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

如果我不制作.containerposition: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>

回答：

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

在没有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>