绝对元素 z-index 内的固定元素不起作用

Question

我得到了两个 absolute 具有相同 z-index 的元素。其中之一的 fixed-position child 比 parent.

更高 z-index

为什么 child 仅与 parent 重叠，而不与另一个具有较低 z-index 的绝对元素重叠。如何实现 child 与两个较低的 z-index 元素重叠？

.lower-element {
  background: green;
  width: 3em;
  height: 3em;
  position: absolute;
  z-index: 10;
}

.higher-element {
  background: blue;
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: .5;
  z-index: 20;
}

.lower-element-1 {
  top: 5em;
}

<div class="lower-element">
  <div class="higher-element">
  </div>
</div>

<div class="lower-element lower-element-1">
</div>

Answer 1

position: fixed 和 position: absolute 仅适用于 top、bottom、left 或 right 值。

.lower-element {
  background: green;
  width: 3em;
  height: 3em;
  position: absolute;
  z-index: 10;
}

.higher-element {
  background: blue;
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: .5;
  z-index: 20;
  top:5em; /* I added */
}

.lower-element-1 {
  top: 5em;
}

<div class="lower-element">
  <div class="higher-element">
  </div>
</div>

<div class="lower-element lower-element-1">
</div>

Answer 2

删除所有 z-index 并仅添加到 .higher-element : z-index: -1;

.lower-element {
  background: green;
  width: 3em;
  height: 3em;
  position: absolute;
}

.higher-element {
  background: blue;
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: .5;
  z-index: -1;
}

.lower-element-1 {
  top: 5em;
}

<div class="lower-element">
  <div class="higher-element">
  </div>
</div>

<div class="lower-element lower-element-1">
</div>

Answer 3

通过让 .higher-element 与 .lower-element 成为兄弟姐妹，然后设置 .higher-element 与 z-index: -1

.lower-element {
  background: green;
  width: 3em;
  height: 3em;
  position: absolute;
  z-index: 10;
}

.higher-element {
  background: blue;
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: .5;
  z-index: -1;
}

.lower-element-1 {
  top: 5em;
}

<div class="lower-element"> 
</div>
<div class="higher-element">
</div>
<div class="lower-element lower-element-1">
</div>

绝对元素 z-index 内的固定元素不起作用

Fixed element inside absolute element z-index does not work

html

css

css-position