z 索引固定父子

Question

我希望 gui 位于海报之上。两个元素都必须有固定的位置。如果我将 gui 位置设置为绝对位置，它工作正常，但固定不起作用。

#gui {
  width: 250px;
  height: 50px;
  position: fixed; // If I change to absolute then it works.
  background-color: green;
}

#poster {
  width: 250px;
  height: 250px;
  position: fixed;
  background-color: red;
  z-index: -1;
}

<div id='gui'>
  <div id='poster'></div>
</div>

https://jsfiddle.net/pfpj03f5/

为什么这不起作用？在#gui 上将 z-index 设置为正数也不起作用。

Answer 1

因为海报是gui的子元素。

无论如何，固定位置使它们独立于父元素，因此只需将海报移出 gui 即可：

<div id='gui'></div>
<div id='poster'></div>

https://jsfiddle.net/eaaz8o2z/