代码之家 › 专栏 › 技术社区 › ProEvilz

为什么会这样position:relative; 是否要更改z索引?

css-position css3 html5 css html

2

ProEvilz · 技术社区 · 7 年前

所以我有这个标记,里面有 <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>

2 回复 | 直到 7 年前

1

4

Temani Afif 6 年前

您需要参考规范和更精确的 painting order

没有 position:relative

尽管如此 流动中,未定位, 树中的块级子体等价物:

.mask )在步骤(8)中

定位 ,不透明度或变换子体,按树的顺序分为以下类别

position:relative 树顺序 因为两个人都没有 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-指数 (负或正)也会影响绘制顺序,在这种情况下,树顺序将不起作用。

将具有负z索引(不包括0)的子体按z索引顺序(首先是最负的),然后是树顺序放置,从而形成堆叠上下文

由z索引大于或等于1的子体按z索引顺序(先最小后树状)排列而成的堆叠上下文。

在第(3)步和第(9)步之间,我们有所有的例子,其中 z-指数 不是像最初描述的那样。

2

0

MichaelvE 7 年前

这是一个有趣的问题。似乎当.mask div成为绝对值并从文档流中取出时,受影响的是位置,但元素的堆叠顺序仍然保持不变。因此,放置在absolute div之前的元素显示在div之下,放置在absolute 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>