html - 固定标题覆盖主要内容

Question

我正在尝试固定我的标题 在标题 div 中我正在添加 position:fixed 和 width:100%

现在在这样做之后，我的主要内容覆盖在标题上。因此，作为修复，我在搜索时发现在 main-content div 中我可以添加 margin-top 相当于标题的高度。

当我这样做时，我的标题发生了变化。假设我将 margin-left 添加为 100px。我的标题顶部移动了 100 像素，主要内容仍然覆盖在标题内容上。

任何修复？

Answer 1

如果固定，只需将内容中的边距从顶部添加到标题高度和 z-index 即可。

HTML:

<div class="header">Header</div>
<div class="content">Content</div>

CSS:

.header{
    background:#F00;
    height:100px;
    position:fixed;
    top:0;
    width:100%;
    z-index:10
}
.content{
    background:#0C0;
    margin-top:100px;
    height:2000px;
}

jsfiddle:http://jsfiddle.net/ashishanexpert/epKv8/

我绝不会建议在内容 div 中添加 position: absolute;。