0

z-index効果が機能するためには負でなければならないため、ヘッダー内でリンクを機能させることができないスクロール効果に問題があります。リンクはヘッダーにあります。

編集申し訳ありませんが、ヘッダー領域（緑）のリンクはアクティブではありません.z-indexプロパティがヘッダー領域に負のインデックスを与えているため、リンクがアクティブではないため、修正を考えていました

http://jsfiddle.net/ThAv5/4/

HTML:

<body>
<div id="container">
    <div id="navBar"></div> 
    <div id="headerBar"></div>
    <div id="mainContent"><h1>This is the main content</h1></div>
</div>
</body>

そしてCSS：

#navBar{
    position:fixed;
    top: 0;
    left:0;
    width: 100%;
    z-index:1000;
    -moz-box-shadow: 0 0 5px #000000;
    -webkit-box-shadow: 0 0 5px #000000;
    box-shadow: 0 0 5px #000000;
    background:red;
    height:50px;
}

#headerBar{
    top: 0;
    height: 250px;
    left: 0;
    right: 0;
    margin:0px auto;
    width:100%;
    position: fixed;
    z-index:-1000;
    background:green;
}

#mainContent{
    overflow: auto;
    z-index: 0;
    margin-top: 250px;
    width:100%;
    height:900px;
}

body, #container{
    background:yellow;
}
4

2 に答える 2

2

あなたが提供したコードにはリンクがないので、リンクは「headerBar」divにあると想定しています。その場合、指定したスタイルのために「navBar」div の下に表示されるため、それらをクリックすることはできません。

これが必要な効果である場合は、「headerBar」div のマージンまたはパディングを指定して、「navBar」の下にリンクをプッシュできるようにします。

于 2013-03-21T05:17:09.027 に答える
1

実際には #navBar は #headerBar と重なっているため、#headerBar のコンテンツは表示されません。高さが 50px の #navBar の下にある必要があります。#headerBar の上部オフセットを 50px に設定します

#headerBar {
top:50px;
}

フィドル

于 2013-03-21T05:16:14.427 に答える