所以我的问题是如何使 div 下推它后面的所有内容，即使后面的元素具有固定位置。
让我解释一下场景:
我有以下结构:
<body>
<div class="top_menu">
</div>
<div class="content">
</div>
</body>
在哪里.top_menu有一个 position:fixed;和 top:0;
现在我使用 JavaScript 在 <body> 之后插入一个新的 div并将其余部分包裹在另一个 div 中，最终得到如下所示的内容。
<body>
<div id="notice_bar">
</div>
<div id="wrap">
<div class="top_menu">
</div>
<div class="content">
</div>
</div>
</body>
现在有办法制作#notice_bar吗？ div 总是下推 #wrap div 及其所有内容？
改变 position:fixed; .top_menu 的属性不是一个选项，因为我正在处理的这个脚本应该可以在任何给定的网站上运行。
我真的没有什么想法了，所以任何提示都将不胜感激。谢谢!
编辑:这是我现在正在处理的具体场景，以防有人觉得足够慷慨地玩它:) http://mirlostudio.com/choeducators
最佳答案
如果您希望通知栏保持在顶部，而菜单随页面滚动，您可以使用一些 jQuery/javascript 来切换一个类，为菜单添加固定定位:
$(window).scroll(function() {
$('.top_menu').toggleClass('scrolling', $(window).scrollTop() > $('#wrap').offset().top);
});.top_menu {
height: 20px;
width: 100%;
background: blue;
}
.content {
position: relative;
height: 600px;
background: grey;
}
.scrolling {
position: fixed;
top: 0px;
right: 8px;
left: 8px;
width: auto;
z-index: 100;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notice_bar">Notice Bar</div>
<div id="wrap">
<div class="top_menu">Top Menu</div>
<div class="content">Content</div>
</div>关于javascript - 如何让div下推下面的一切，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31627822/