3

私は、非常に単純な問題であることを望んでいることに困惑しています。2 つの 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;
}

基本的に、margin-top の代わりに位置相対と top 属性を使用します。注意すべき重要な点の 1 つは、z-index を常に 0 より大きく設定する必要があることです。

于 2013-08-24T11:44:13.947 に答える