将绝对定位的 div 设置为与一个常规 div 重叠而不是另一个

Question

我有一个设置了拆分窗格的页面 - 顶部和底部（使用 calc() 作为高度的 div），顶部 div 具有覆盖顶部 div 的绝对定位 div。 HTML + CSS 下面来自https://jsfiddle.net/b2mb79ev/1/

<div id="everything">
    <div id="top">
        <div id="free"></div>
    </div>
    <div id="bottom"></div>
  </div>
</div>


#everything {
  width: 400px;
  height: 400px;
}

#top {
  height: calc(50%);
  width: 100%;
  background: blue;
}

#free {
  position: absolute;
  top: 50px;
  left: 300px;
  height: 200px;
  width: 50px;
  background: yellow;
  border: 3px solid black;
}

#bottom {
  height: calc(50%);
  width: 100%;
  background: rgba(0,255,0,0.6);
}

但是我希望绝对定位的 div 不会侵入底部 div。我希望底部 div 始终位于“更高”层。在 jsfiddle 中，我不希望黄色位进入绿色位。

但据我所知，顶部和底部 div 始终具有相同的级别，因为它们只是定期流动的元素，不会注意到 z-index。我可以使用 z-index 将绝对定位的 div 置于两者之上或之下，而不是一个之上和之下？

有没有办法做我想做的事？

Answer 1

您只需在#bottom div 上设置一个非静态位置（例如position:relative），即可提供您所追求的stacking context。

jsFiddle example

#bottom {
  height: calc(50%);
  width: 100%;
  background: rgba(0, 255, 0, 0.6);
  position:relative;
}