html - CSS div(相对位置)忽略另一个 div(位置 : absolute)

Question

尝试构建一个具有固定的非滚动标题区域(称为“top_box”)和可滚动的内容区域(称为“middle_box”)的站点。

top_box 是 position: absolute。middle_box 是 position: relative。

middle_box“忽略”top_box 并显示在 top_box 上，而不是显示在其下方。

#top_box {
  position: fixed !important;
  position: absolute;
  top: 2%;
  height: 20%;
}
#middle_box {
  position: relative;
  height: 70%;
  overflow: auto;
}

<div id="top_box">
  ...
</div>

<div id="middle_box">
  ...
</div>

知道为什么 middle_box 忽略 top_box 并从屏幕顶部开始而不是从 top_box 下方开始吗？

Answer 1

问题是 position: fixed 或 position:absolute 将 div 从流中移除。因此，您的relative div 不会注意到上面已经有一个。所以它将被放置在顶部。

要实现您想要的效果，您必须将 CSS 更改为以下内容。

我已经设置了内容，在你的例子中是 div #middle_box 到 height: 1000px 所以你可以看到内容区域是可滚动的，而你的另一个 div #top_box 保持在顶部。

body {
  margin: 0;
}
#top_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: #eee;
  z-index: 100;
}
#middle_box {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.3);
}

<div id="top_box">
  top_box
</div>

<div id="middle_box">
  middle_box
</div>