如何在顶部浮动div-向下推其他div？

Question

我觉得这是一个非常愚蠢的问题，但是我读过的所有内容都还没弄清楚如何使用它。 我想要一个非常基本的页面，其中包含两个div 。 顶部是整体信息，底部是所有数据。 当数据长于页面且用户滚动时，我希望顶部div向下浮动。 我通过使用position: fixed和top: 0 ，但是第一个div不会将第二个向下。

我当然可以在data div添加margin-top ，但是我也希望能够打开/关闭top div 。 当我执行此操作（将其关闭）时， margin-top仍然存在，因此很明显有些破绽。

如何保持浮动div在顶部，而将其他所有项向下推？

这是一个示例，显示了我正在苦苦挣扎的基础知识：

https://jsfiddle.net/vxf5dh7j/

HTML：

<html>
  <body>
    <div id="topFloat">
      BANNER TYPE STUFF
    </div>
    <div id="data">
      test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
    </div>
  </body>
</html>

CSS：

#topFloat {
  border:1px black solid;
  position:fixed;
  top: 0;
}
#data {
  border: 1px red solid;
}

Answer 1

像这样吗

 #topFloat { border:1px black solid; position:sticky; top: 0; } #data { border:1px red solid; }

 <html> <body> <div id="topFloat"> BANNER TYPE STUFF </div> <div id="data"> test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /> </div> </body> </html>

如何在顶部浮动div-向下推其他div？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-02-22 20:16:55

如何在顶部浮动div-向下推其他div？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-22 20:16:55

解决方案1
0 已采纳 2019-02-22 20:16:55