固定头部时滚动主要内容

Question

我被一个希望非常简单的问题难住了。我有一个页面，由两个div组成：

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

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

通过将标题固定在顶部，给主要内容添加足够大的margin-top使其处于正确的位置，并调整z-index以使主要内容覆盖标题，我可以实现我想要的外观和感觉。问题是，当我这样做时，主要内容分区的margin-top覆盖了标题的所有链接和悬停元素，使它们可见但不活动。

我真的希望这是一个容易解决的问题。有人能提供建议吗？我正在尝试在不使用JavaScript的情况下完成此操作。非常感谢！

- ChiralCenter

---

我不清楚你所说的“滚动标题”是什么意思。 你能否分享一个页面布局的链接？也许在JSFiddle上？ - Vinod Vishwanath

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

基本上使用相对定位和top属性代替margin-top。需要注意的一件重要的事情是，z-index始终需要设置为大于零。

- Simon Bengtsson