Html 位置固定内容重叠问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5311706/
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
Position fixed content overlapping problem
提问by Soarabh
This is my html5 markup
这是我的 html5 标记
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
Now used css
现在用的css
header{ height: 95px;position: fixed;width: 100%;min-width: 980px;}
footer{background:#000000;bottom:0;height:30px;position:fixed;width:100%;min-width: 980px}
Now my problem is when i put any content inside
现在我的问题是当我把任何内容放进去
<div id="content">
</div>
The content comes from top:0 which is not required. I dont want to use padding or margin top over content. Is there any way from which content comes below header.
内容来自不需要的 top:0。我不想在内容上使用填充或边距顶部。有什么方法可以让内容低于标题。
采纳答案by Marcel
The main reason is because the <header>is position:fixedtaking it out of the document flow. You'll need to add marginor paddingto either the <body>or your <content>(??) element. Also, if using HTML5 elements, add this to the top of your CSS rules for compatibility with older browsers.
主要原因是因为<header>正在position:fixed将其从文档流中取出。您需要将margin或添加padding到<body>或 您的<content>(??) 元素。此外，如果使用 HTML5 元素，请将其添加到 CSS 规则的顶部以与旧浏览器兼容。
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
Taken from Eric Meyer's CSS Reset.
回答by Jon
You don't mention any other layout requirements you may have, but this would be a good start
您没有提到您可能有的任何其他布局要求，但这将是一个好的开始
content {position: relative; top: 95px}
Update
更新
As the other good people state, <content>is not a valid HTML5 tag. Maybe it doesn't have to do with the specific question, but do follow their advice and avoid rolling your own tags. Use a standard one instead.
正如其他好人所说，<content>不是有效的 HTML5 标签。也许这与具体问题无关，但请务必遵循他们的建议并避免滚动您自己的标签。改用标准的。
回答by Starx
Follow those HTML5 tags, that are present. If you going to create your own, then that might have consequencies.
遵循那些存在的 HTML5 标签。如果您要创建自己的，那么可能会产生后果。
Here follow this.
这里按照这个。
<header>
</header>
<section>
</section>
<footer>
</footer>
To learn about valid HTML5 tags please follow this link.
要了解有效的 HTML5 标签，请点击此链接。
回答by ElaGorilaki
If other solutions don't work, check that your background/background-color is not transparent, and set it to white.
如果其他解决方案不起作用，请检查您的背景/背景颜色是否不透明，并将其设置为白色。
回答by Diego Grin
So for what I get from this question, you are trying not to overlap stuff, you could use z-index inside your div's css:
因此，对于我从这个问题中得到的信息，您试图不重叠内容，您可以在div的 css 中使用 z-index ：
.example {
。例子 {
position: absolute;
z-index: -10;
}
}
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)
z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）
回答by Ben
I'm assuming you don't actually mean <content>, as that isn't a valid HTML5 tag. Anyway, the problem you're seeing is down to the position: fixeddirective for your <header>element. Try removing that and going from there.
我假设您实际上并不是指<content>，因为那不是有效的 HTML5 标签。无论如何，您看到的问题归结position: fixed为您的<header>元素的指令。尝试删除它并从那里开始。
