固定标题覆盖主要内容

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;。

Answer 2

将此 css 赋予您的主要内容 div：

#main-content /* replace # with . if its a class*/
{
position:absolute;
top:/*height of header*/;
left:0px;
}

它对我来说工作正常。看这个小提琴：http://jsfiddle.net/xPutK/1/

使用css的z-index属性调整元素的深度。