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

您需要参考规格书，更确切地说是painting order，以了解何时印刷每一层。

没有position:relative的情况下，您的元素未定位，将在步骤（4）中打印：

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

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

所有定位的，不透明或转换后代，按树顺序分为以下类别

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

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


....


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

我们在（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>

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

2 个答案: