Div背景图片Z-Index问题

Question

我想让内容的背景图片出现在页眉和页脚的后面。目前，内容的顶部背景超出了页眉，并且可以看到底部稍微覆盖了页脚（注意页脚边框颜色的轻微变化）。我尝试将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;
}

- Jon

Answer 1

为了解决问题，您正在在页脚和页眉上使用z-index，但是您忘记了position，如果要使用z-index，则元素必须具有position属性：

请添加以下CSS到您的页脚和页眉：

position: relative; 

编辑：

我还注意到#backstretch上的背景图具有负z-index，请勿使用它，这会导致某些浏览器出现问题...

从#backstretch中移除：

z-index: -999999;

在这里阅读有关Z-Index的简介！

- Zuul

---

backstretch是我下载的一个jQuery插件。我应该对他们的代码进行调整吗？ - Jon

取决于情况，负 z-index 的问题会在旧版浏览器中出现...如果你需要支持它们，那么你应该这样做 :) 就我个人而言，我遇到了那种解决方案的问题，不得不仅使用正值来组织我的元素堆栈！ - Zuul

长久以来，我一直使用 display: block; 来使 z-index 与 img 正常工作...非常感谢您分享这个...帮助很大！ - twknab

非常有用的知识，这也解决了我的问题。之前不知道position和z-index之间的关系。 - Mike Upjohn

Answer 2

为了让 z-index 生效，你还需要给它一个 position 属性：

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

- Steve

Answer 3

将您的页眉和页脚位置设置为“absolute”，就可以解决问题。希望这能帮到您，祝您的项目好运！

- rafaelbiten

---

不一定要是“绝对的”。也可以是“相对的”。 - Steve

@Steve - 是的，但你必须将其设置为相对，并关注z-index。（在这种情况下）我只是认为将其设置为绝对位置并不关心z-index会更容易一些。 - rafaelbiten