固定页眉覆盖主内容

Question

我正在尝试使我的页眉固定，为此我在页眉div中添加了 `position:fixed` 和 `width:100%`。但是这样做后，我的主要内容会覆盖在页眉上。所以，我在搜索中找到解决方法，在 `main-content` div 中加入顶部外边距等于页眉高度的数值。

但是，当我这样做时，我的页眉发生了位移。例如，如果我将左侧外边距设置为100像素，则我的页眉顶部会向下移动100像素，而主要内容仍然会覆盖在页眉内容上。有没有办法解决？

- Aakansha

---

给一些示例代码。 - dthree

你的页眉有 top: 0 吗？ - Sampson

是的...它必须是正确的！！ - Aakansha

@user1508372 请为我们创建一个小的演示；您可以在http://jsfiddle.net上进行操作。 - Sampson

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

- Ashish Kumar

---

嗨，当我在jsfiddle中执行此操作时，它可以正常工作。即使在一个示例应用程序中也是如此。但是当我将此代码添加到实际网站中时，我可以看到我的主内容在向下滚动时通过标题div后面传递。 - Aakansha

他们将CSS设置为.content{position:relative; z-index:-1}，position:relative不会对代码产生负面影响。 - Ashish Kumar

Answer 2

将此CSS应用于您的主内容div：

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

对我来说它正常工作。请参见此fiddle：http://jsfiddle.net/xPutK/1/

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

- Zword

---

好的，我会创建一个 Fiddle。 - Zword

现在我添加了以下代码：.headerClass{position: fixed; height: 150px; top: 0; width: 100%; z-index: 10;} .contentClass{margin-top:150px;} 现在它不会覆盖标题，但当我移动滚动条时，主内容会穿过标题div。 - Aakansha

嗨，我能在样本上做到这一点。但是当我将此代码用于我的实际网站代码时...它会移动主内容边距。但是当我向上滚动时，我可以看到文本在我的标题div后面通过。我甚至无法发布代码，因为我正在使用公司的非常复杂的模板。 - Aakansha

只需发布标题和主要内容的代码部分，因为我的解决方案应该解决它。 - Zword

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/44513/discussion-between-zword-and-user1508372 - Zword