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/