如何使div下推所有下方内容

Question

如何使div下推所有下方内容

4

我的问题是如何使一个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？

更改.top_menu的position:fixed;属性不是一个选项，因为我正在开发的脚本应该适用于任何给定的网站。

我真的没有更多的想法了，所以任何提示都将不胜感激。谢谢！

编辑：这是我现在正在处理的具体情况，如果有人愿意玩弄它：） http://mirlostudio.com/choeducators

- Guillermo Carone

也许可以在“#notice_bar” div中使用“display: block”？ - Szabolcs Antal

将自己的代码/HTML元素插入到其他网站中，并期望一切都能正常工作，这是一个过高的期望——因为各种布局实在是太多了。当然，你可以通过脚本中的“host”页面，尝试识别所有（或某些）固定元素，并操纵它们的坐标——但这仍然很可能会在许多网站上出现问题（特别是如果它们使用自己的处理位置动态的脚本）。 - CBroe

最好的方法可能是为人们提供选项，以定制脚本插入的元素应该如何显示和出现在哪里。 - CBroe

2个回答

0

如果您将.wrap容器设置为position: relative;，则所有绝对定位的.wrap容器内的元素都将与其父容器一起移动。

- Christian Engel

谢谢Christian。问题是#wrap内部有position:fixed;属性的元素，并且它们似乎不关心#wrap的相对位置... - Guillermo Carone

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- apaul · Accepted Answer

如果您想让通知栏保持在顶部，而菜单随页面滚动，您可以使用一点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>