固定标题覆盖主要内容

Question

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

中修复我的标题

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

当我这样做时，我的标题正在移动。就像假设我添加左边距为 100px 一样。我的标题顶部移动了 100px，主要内容仍然覆盖在标题内容上。

有什么解决办法吗？

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/

我永远不会建议在内容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属性来调整元素的深度。