html - 将绝对定位的 div 设置为与一个常规 div 重叠但不与另一个常规 div 重叠

Question

我有一个页面设置了一个拆分 Pane - 顶部和底部(使用 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;
}