使用 zIndex 进行元素标高

Question

我在设置图层时遇到问题。我已经应用了背景来覆盖整个页面，但是当我放置应用了

z-index

的元素时，会发生意外的行为。父元素内的子元素似乎继承了父元素的

z-index

，这会导致问题。

是否可以以某种方式控制图层，其中背景位于父级和子级之间？

问题：

给父元素添加

zIndex: 8

样式后，

elevated-item

位于

backdrop

下方。如果删除

z-index

，它将按预期工作

期望的行为：

backdrop

元素应覆盖

parent

，但

elevated-item

应位于

backdrop

之上，就像

item-2

的情况一样。

body {
  margin: 0;
  background-color: linen;
}

.backdrop {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: black;
  z-index: 10;
  opacity: 0.8;
}

.parent {
  background: red;
  height: 20vh;
  z-index: 8;
  position: relative;
}

.elevate-item {
  background: cyan;
  z-index: 12;
  position: relative;
}

.item-2 {
  background: green;
  height: 20vh;
  z-index: 12;
  position: relative;
}

<div>
  <div aria-label="backdrop" class="backdrop"></div>

  <div aria-label="parent" class="parent">
    <p>content</p>
    <div aria-label="elevated-item" class="elevate-item">
      Item that should be elevated on top of the backdrop
    </div>
  </div>
  <div aria-label="item-2" class="item-2">
    It works without parent
  </div>
</div>

沙盒示例

Answer 1

从

z-index

元素中删除

.parent

属性将解决您面临的问题并为您提供所需的行为。

z-index

创建一个堆叠上下文，它可以影响子元素的定位。如果父元素上有

z-index

，它会影响子元素在页面上的分层方式。通过从

z-index

中删除

parent

，子元素（

<p>content</p>

和

elevate-item

）可以遵循自然堆叠顺序。

我用类名

div

注释掉了

item-2

，这样你就可以清楚地看到变化

body {
  margin: 0;
  background-color: linen;
}

.backdrop {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: black;
  z-index: 10;
  opacity: 0.8;
}

.parent {
  background: red;
  height: 20vh;
  /* z-index: 8;  Removed this property */
  position: relative;
}

.elevate-item {
  background: cyan;
  z-index: 12;
  position: relative;
}

.item-2 {
  background: green;
  height: 20vh;
  z-index: 12;
  position: relative;
}

<div>
  <div aria-label="backdrop" class="backdrop"></div>

  <div aria-label="parent" class="parent">
    <p>content</p>
    <div aria-label="elevated-item" class="elevate-item">
      Item that should be elevated on top of the backdrop
    </div>
  </div>
  <!-- Commented out the code below so you can see it properly 
  <div aria-label="item-2" class="item-2">
    It works without parent
  </div> -->
</div>