Html 在 css 中固定位置的 div 之后的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12405528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div after a div which position is fixed in css
提问by mjdevloper
I have made a div and I have given it position: fixed using this style sheet:
我做了一个 div 并给了它 position: fixed 使用这个样式表：
CSS
CSS
position: fixed;
top: 35px;
z-index: 9999;
height:60px;
background:#000;
width:100%;
Now what I want is: if this div has height zero, then the div which is just after should come in place of the above div. if the height of div is not zero, the next div after this div should have a margin from the above div so both div will not overlap each other.
现在我想要的是：如果这个 div 的高度为零，那么后面的 div 应该代替上面的 div。如果 div 的高度不为零，则此 div 之后的下一个 div 应该与上面的 div 有一个边距，这样两个 div 就不会相互重叠。
回答by Guffa
When you have an element that is fixed (or absolute), there is no element after it. The fixed element is taken out of the document flow.
当你有一个固定的（或绝对的）元素时，它后面没有元素。固定元素从文档流中取出。
If you want two elements after each other at a fixed position, make a container that is fixed, and put the two elements inside it.
如果你想让两个元素在一个固定的位置一个接一个，那就做一个固定的容器，把两个元素放在里面。
You can put another container with a top-margin around them, and set a top-margin on the second element. If the first element is empty, there is nothing to have a margin to, so the margin will collapse outside the container and the second element will be at the top of the container.
您可以在它们周围放置另一个带有上边距的容器，并在第二个元素上设置上边距。如果第一个元素为空，则没有任何内容可以设置边距，因此边距将在容器外折叠，而第二个元素将位于容器顶部。
(The second container is needed because the margin will not collapse outside the fixed element.)
（需要第二个容器，因为边距不会在固定元素外折叠。）
回答by AdheneManx
Other posters are correct in that setting position: fixedfor a layout element breaks the document flow; which is sometimes intended (such as for a fixed position navigation).
其他海报是正确的，position: fixed布局元素的设置打破了文档流程；这有时是有意的（例如用于固定位置导航）。
Here is a jQuery snippet I've used to circumvent the problem in liquid layouts where the height of the navigation may change:
这是我用来规避导航高度可能发生变化的液体布局中的问题的 jQuery 片段：
var menuHeight = $("header").height();
$("main").css("padding-top", menuHeight);
$( window ).resize(function() {
var menuHeight = $("header").height();
$("main").css("padding-top", menuHeight);
});
Main is the main content on my site, as the width of the page changes the padding at the top of the main content changes to the height of the header element, which mimics it being in the document flow.
Main 是我网站上的主要内容，因为页面的宽度改变了主要内容顶部的填充更改为标题元素的高度，这模仿了它在文档流中。
Note: the code runs once at loading (for different device sizes) and on window resize (for user window resize). This could easily be neater, but it works fine for me.
注意：代码在加载时（针对不同的设备大小）和窗口大小调整（针对用户窗口大小调整）运行一次。这很容易更整洁，但对我来说效果很好。
