我觉得这是一个非常愚蠢的问题，但我读过的所有内容都没有让我明白如何使用它。我想要一个包含两个 div 的非常基本的页面。一个在顶部显示总体信息，一个在底部显示所有数据。当数据长于页面并且用户滚动时，我希望顶部的div向下 float 。我通过使用 position: fixed 和 top: 0 实现了这一点，但第一个 div 不会将第二个向下推。
当然，我可以将 margin-top 添加到数据 div，但我也希望能够切换顶部 div 开/关。当我这样做(将其关闭)时，margin-top 仍然存在，所以这显然有点 hack。
我怎样才能让一个 float 的 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;
}
最佳答案
是这样的吗？
#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>关于javascript - 如何将 div float 在顶部 - 并将其他 div 向下推？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54834389/