Question

位置固定元素始终相对于窗口定位。

但是，如果位置固定元素位于位置相对容器内，则固定位置的子元素将遵循位置相对容器的z-index。这意味着如果容器的任何兄弟姐妹也是相对的并且具有更高的z指数，则它们将覆盖固定孩子的位置。

blog.xyz.com

有没有办法让位置固定的孩子“逃避”父母的z-index只改变孩子的CSS而不是父母的？

期望的最终结果是容器1覆盖容器2，但覆盖容器1的覆盖物（即容器2的子容器），我无法更改容器1或容器2的CSS 。 / p>

Answer 1

设置container1 absolute和container2 relative将重叠它们

container1的z-index需要大于container2的z-index，而overlay和container1的z-index相同。然后，如果你没有设置container2的z-index，它将为0，而container1可以是1，覆盖2。

我编辑了container1的宽度以查看后面的container2，你可以将它设置回100％。

.container1 {
  position: absolute;
  z-index: 1;
  height: 200px;
  width: 90%;
  background-color: yellow;
  box-shadow: 5px 5px 3px #888888;
}

.container2 {
  position: relative;
  background-color: green;
  height: 200px;
}

.overlay {
  position: fixed;
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  background: black;
  opacity: .8;
  z-index: 2;
}

<div class="container1"></div>
<div class="container2">
 <div class="overlay"></div>
</div>

位置固定子项受位置相对父容器的Z-index限制

1 个答案: