Question

我正在尝试修复我的标题，因为我在标题div中添加了position:fixed和width:100%

现在执行此操作后，我的主要内容将覆盖在标题上。所以作为一个修复，我在搜索中发现在main-content div中我可以添加margin-top等效于header的高度。

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

任何修复？

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属性来调整元素的深度。

固定标题覆盖主要内容

2 个答案: