Html 固定标题覆盖主要内容

我正试图在header div中为我添加的

位置：fixed

和

宽度：100%

现在，在这样做之后，我的主要内容覆盖在标题上。所以，作为一种修复，我在搜索中发现，在MainContentDiv中，我可以添加和页眉高度相等的页边顶部

当我这样做的时候，我的头球移动了。假设我把左边的边距加上100px。我的标题顶部移动了100像素，主要内容仍然覆盖在标题内容上

---

有什么修正吗？

将此css提供给您的主要内容分区：

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

对我来说，它工作正常。看这把小提琴：

---

使用css的

z-index

属性来调整元素的深度。

只需在内容中添加页眉高度等于页眉高度的边距，并在页眉中添加z-index（如果固定）

HTML:

<div class="header">Header</div>
<div class="content">Content</div>

.header{
    background:#F00;
    height:100px;
    position:fixed;
    top:0;
    width:100%;
    z-index:10
}
.content{
    background:#0C0;
    margin-top:100px;
    height:2000px;
}

jsfiddle：

---

我绝不会建议添加

位置：绝对在内容部分。
给出一些示例代码。您的标题是否有
top:0
？是的……它必须是正确的@user1508372请为我们创建一个小演示；你可以在。好的，我将创建一个我添加的fiddlenow。headerClass{position:fixed；height:150px；top:0；width:100%；z-index:10；}。contentClass{margin top:150px；}现在它不会覆盖标题，但是当我移动滚动条时，主要内容是通过标题divHi，我可以在一个示例上这样做。但当我在我的实际网站代码中使用此代码时…它正在改变主要内容的边距。但当我向上滚动时，我可以看到标题div后面经过的文本。我甚至不能发布代码，因为我使用的是一家公司非常复杂的模板。只需发布标题和主要内容的部分代码，因为我的解决方案应该可以解决它。让我们大家好，当我在JSFIDLE中执行此操作时。它工作正常。甚至在示例应用程序上也是如此。但是我在实际的网站中添加了这段代码，当我向下滚动时，我可以看到我的主要内容在标题div后面传递。他们将css设置为。content{position:relative；z-index:-1}position:relative不会对代码产生不良影响。