Question

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

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

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

我可以通过将标题固定到顶部来完成我想要的外观和感觉，为主要内容提供足够大的边距以便在正确的位置，并调整z-index以便主要内容滚动到标题。问题在于，当我这样做时，主要内容部分的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;
}

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

滚动主要内容超过固定标题

1 个答案: