3

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

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

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

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

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

4

1 回答 1

3

我实际上遇到了同样的问题并想出了这个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 始终需要设置为高于零。

于 2013-08-24T11:44:13.947 回答