css - 将主要内容滚动到固定标题上

Question

我一直被我希望是一个非常简单的问题所困扰。我有一个包含两个 div 的页面:

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

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

我可以通过将页眉固定在顶部，为主要内容提供足够大的边距以使其位于正确的位置，并调整 z-index 以便主要内容滚动来实现我想要的外观 header 。问题是，当我这样做时，主要内容部分的 margin-top 覆盖了标题的所有链接和悬停元素，使它们可见，但不活动。

我真的希望这是一个简单的修复。有人可以提出建议吗？我试图在不求助于 javascript 的情况下做到这一点。非常感谢!

Answer 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;
}

基本上使用相对位置和顶部属性而不是边距顶部。需要注意的一件重要事情是，z-index 始终需要设置为高于零。