固定标题覆盖主要内容

Question

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

现在，完成此操作后，我的主要内容覆盖在标题上。因此，作为修复，我在搜索中发现在主要内容 div 中我可以添加相当于标题高度的 margin-top 。

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

有什么解决办法吗？

Answer 1

只需将内容中从顶部开始的边距等于标题高度和 z 索引添加到标题（如果固定）。

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/

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