在固定标题上滚动主要内容答案

【问题标题】：Scroll Main Conent OVER Fixed Header在固定标题上滚动主要内容
【发布时间】：2012-10-11 15:36:39
【问题描述】：

我被一个我希望是一个非常简单的问题难住了。我有一个包含两个 div 的页面：

<div id="header">...</div>
<div id="content">...<div>

标题将固定在页面顶部，主要内容部分将正常滚动。我需要我的主要内容 div 滚动到标题上，同时覆盖它。

我可以通过将标题固定到顶部来完成我想要的外观，给主要内容一个足够大的 margin-top 以放置在正确的位置，并调整 z-index 以便主要内容滚动标题。问题是当我这样做时，主要内容部门的 margin-top 覆盖了标题的所有链接和悬停元素，使它们可见，但不活动。

我真的希望这是一个简单的解决方案。有人可以提出一些建议吗？我正在尝试在不使用 javascript 的情况下做到这一点。提前非常感谢！

【问题讨论】：

我不清楚“滚动到标题”是什么意思。您可以在链接中分享您的页面布局吗？也许在 JSFiddle 上？

标签： css header scroll positioning html

【解决方案1】：

其实我也有同样的问题，想出了这个http://jsfiddle.net/EWefL/

<header><a href="/">Working header link</a></header>
<section>Section</section>

header {
    background:#cff;
    height:100px;
    position:fixed;
    right:0;
    left:0;
    z-index:100;
}

section {
    background: #579;
    height:600px;
    top:100px;
    position:relative;
    z-index:200;
}

基本上使用 position relative 和 top 属性而不是 margin-top。需要注意的重要一点是，z-index 始终需要设置为高于零。

【讨论】：