Question

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

的HTML + CSS

<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;
}

设置绝对定位div以重叠一个常规div而不是另一个

1 个答案: