30

コンテンツの背景画像をヘッダーとフッターの後ろに表示しようとしています。現在、コンテンツの背景の上部がヘッダーに突き出ており、下部がフッターをわずかに覆っていることがわかります（フッターの境界線の色がわずかに変化していることに注意してください）。z-index:-100;動作するコンテンツに適用するように設定してみましたが、テキストが選択できなくなりました。次にz-index:1;、コンテンツに適用しようとしましたが、ヘッダー/フッターの下にコンテンツが表示されませんでした。

ウェブサイトへのリンク

ここに画像の説明を入力してください

//html
<div id="wrapper">
    <header>
        <div id="logo"></div>
        <nav>
            <ul>
                <li id="aboutNav"><a href="template.html">home</a></li>
                <li id="menuNav"><a href="">menu</a></li>
                <li id="specialsNav"><a href="">specials</a></li>
            </ul>
        </nav>  
    </header>
    <div id="content">
        content <br> goes <br> here <br>
        <a href="http://www.google.ca" target="_blank">google</a>
    </div>
</div>
<footer>
    <div id="thumbsDesc"></div>
    <div id="thumbs"></div>
</footer>



//css
header {
    width: 100%;
    height: 100px;
    background: url(../img/top.png) repeat-x;
    z-index: 110;
}

#wrapper #content {
    color: #FFFFFF;
    background: url(../img/body.png) repeat-y;
    width: 524px;
    padding: 25px 30px 25px 30px;
    position: absolute;
    bottom: 100px;
    top: 90px;
    margin: 0 0 0 150px;
    z-index: 1;
}

footer {
    margin: -107px 0 0 0;
    width: 100%;
    height: 107px;
    background: url(../img/bottom.png) repeat-x;
    z-index: 100;
}
4

3 に答える 3

73

この問題を解決するには、フッターとヘッダーでz-indexを使用していますが、位置を忘れています。z-indexを使用する場合は、要素に次の位置が必要です。

このCSSをフッターとヘッダーに追加します。

position: relative;

編集：

また、＃backstretchの背景画像のz-indexが負であることに気づきました。これは使用しないでください。一部のブラウザは、非常に奇妙になります...

#backstretchから削除：

z-index: -999999;

ここでZ-Indexについて少し読んでください！

于 2012-05-08T23:22:21.237 に答える
7

z-indexを機能させるには、次の位置も指定する必要があります。

header {
    width: 100%;
    height: 100px;
    background: url(../img/top.png) repeat-x;
    z-index: 110;
    position: relative;
}
于 2012-05-08T23:22:35.640 に答える
2

ヘッダーとフッターの位置を「絶対」に設定すると、うまくいくはずです。それがあなたのプロジェクトに役立ち、幸運を祈っています！

于 2012-05-08T23:22:39.600 に答える