空间<article> <header>位置固定
我有跟踪问题。我想有标题(位置:固定)和一些文本在文章部分和这段之间的一部分，一些空间。
我的CSS代码：
header
{
position: fixed
margin-bottom: 10px; // <-- space I'd like to have
}我的HTML代码：
<body>
<header> HEADER </header>
<article> SAMPLE TEXT</article>
</body>但是现在看起来标题和文章是重叠的。
http://jsfiddle.net/LvKSm/embedded/result/
那么，如何使这段之间的空间/边距？
回答 3
Stack Overflow用户
发布于 2014-02-27 17:48:21
这可能就是你想要的。您需要为header后面的元素设置一个页边距，其值等于标头+ 10。您必须这样做，因为元素header有一个位置fixed，它从文档的自然流中“移除”它，即它将位于其余内容的顶部，而其他内容则忽略它。因此，article忽略了标头的位置并占据了它的位置。
header {
position: fixed;
height: 100px;
width: 100%;
background: red;
top: 0;
}
article {
width: 100%;
margin-top: 110px; /* height header + 10px */
background: blue;
}如果标题的高度是动态的，可以使用jQuery (或JS)设置文章的页边距。小提琴。
$("article").css({
"margin-top": $("header").height() + 10
});编辑:我编辑了你的小提琴，它现在运行得很好。
Stack Overflow用户
发布于 2014-02-27 17:47:23
您需要在margin标记上使用article
header {
background: #ddd;
position: fixed;
top: 0;
/* width: 100%; */ /* You would probably need this */
}
article {
margin-top: 50px;
}演示
演示 (您创建的小提琴的更新演示)
某种解释是，您正在使用margin-bottom on header标记，这是一个fixed position元素，现在，当您进行任何元素修复时，它只是从文档流中退出，您的margin不会对文档上的任何元素产生任何影响。
还记得对top: 0;元素使用header，或者当您在article上使用margin-top时，它也会使用header元素。
使用
//进行注释无效，需要使用/* Comment goes here */
Stack Overflow用户
发布于 2014-02-27 17:53:34
在这里最好的做法是在你的身体标签上涂上填充物。见演示
body {padding-top: 120px;}同时，也不要忘记把top: 0;给你的header标签，因为它有一个固定的位置，这也是为什么保证金底部不适合它的原因。
https://stackoverflow.com/questions/22076248
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号