Question

我已经制作了一个div而且我给它定位：使用此样式表修复：

CSS

position: fixed;
top: 35px;
z-index: 9999;
height:60px;
background:#000;
width:100%;

现在我想要的是：如果这个div的高度为零，则后面的div应该代替上面的div。如果div的高度不为零，则此div之后的下一个div应该具有上述div的余量，因此两个div不会相互重叠。

Answer 1

当你有一个固定（或绝对）的元素时，它后面没有元素。固定元素从文档流中取出。

如果你想让两个元素在一个固定的位置相继，那么就做一个固定的容器，把两个元素放在里面。

您可以在其周围放置另一个带有上边距的容器，并在第二个元素上设置上边距。如果第一个元素为空，则没有任何边距，因此边距将在容器外部折叠，第二个元素将位于容器的顶部。

（需要第二个容器，因为边距不会在固定元素之外折叠。）

演示：http://jsfiddle.net/Guffa/r5crS/

Answer 2

如果你可以使用jQuery：

$(document).ready(function() {
  var height = $("#one").height();
  if(height > 0)
  {
      $("#two").css("margin-top","10px");
  }
});

Demo

Answer 3

其他海报是正确的，因为布局元素position: fixed设置会破坏文档流程;这有时是有意的（例如固定位置导航）。

这是一个jQuery代码片段，我用它来规避液体布局中导航高度可能会发生变化的问题：

var menuHeight = $("header").height();
$("main").css("padding-top", menuHeight);
$( window ).resize(function() {
    var menuHeight = $("header").height();
    $("main").css("padding-top", menuHeight);
});

主要是我网站上的主要内容，因为页面宽度更改主内容顶部的填充更改为标题元素的高度，这模仿它在文档流中。

注意：代码在加载时运行一次（对于不同的设备大小）和窗口大小调整（对于用户窗口调整大小）。这可能很容易整洁，但对我来说效果很好。

div后面的div在css中固定的位置

3 个答案: