CSS中一个定位为fixed的div后面的div

Question

我已经创建了一个div，并使用以下样式表将其定位为position: fixed：

CSS

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

现在我想要的是： 如果这个 div 的高度为零，则其后紧随的 div 应放置在上面的 div 位置。 如果 div 的高度不为零，则该 div 之后的下一个 div 应该具有与上面 div 之间的间距，以便两个 div 不会重叠。

- mjdevloper

---

可以的，但如果有 CSS 的解决方案，我更倾向于使用 CSS。我目前正在使用 jQuery。首先，我将固定 div 的显示设置为 none。在页面加载事件中，我通过 jQuery 扩展它，然后给下一个 div 一些边距。但这样做的外观和感觉非常奇怪。 - mjdevloper

Answer 1

当您有一个固定的元素（或绝对定位）时，它后面就没有其他元素了。该固定元素会脱离文档流。

如果您想要在固定位置放置两个相邻的元素，请创建一个固定容器，并将这两个元素放入其中。

您可以在它们周围添加具有上外边距的另一个容器，并在第二个元素上设置上外边距。如果第一个元素为空，则没有任何内容可以产生外边距，因此外边距将折叠到容器外部，第二个元素将位于容器顶部。

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

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

- Guffa

---

同意。你可以通过 .fixedCont div + div {margin-top:10px;} 选择第二个元素（以及之后的每个元素）。 - Ege

Answer 2

其他用户的回答是正确的，为布局元素设置 position: fixed 会破坏文档流；但有时这是有意为之的（例如用于固定导航）。

以下是我使用过的 jQuery 代码片段，用于解决液态布局中导航栏高度可能变化的问题：

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

主要内容是我的网站的主要内容，随着页面宽度的变化，主要内容顶部的填充会根据头元素的高度而改变，这样就可以模拟它在文档流中。

注意：代码在加载时只运行一次（针对不同的设备大小），并在窗口调整大小时（针对用户调整窗口大小）运行。这可能可以更整洁，但对我来说已经很好用了。

- AdheneManx

Answer 3

如果您可以使用jQuery：

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

演示

- ygssoni

Answer 4

在其他答案的强烈影响下，这里提供了一个稍微简单一些的版本，不需要第二个元素来添加内容。只需设置整个文档主体的顶部边距，确保其余非固定内容位于顶部固定div下方：

        function set_body_top_margin() {
            var menuHeight = $("#top_div").height();
            $(document.body).css("margin-top", menuHeight);
        }
        $(document).ready(set_body_top_margin);
        $(window).resize(set_body_top_margin);

注意：如果您的顶部 div 由于任何原因改变大小，则必须在其他地方添加另一个调用 set_body_top_margin()。

- Dmytro Bugayev