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 回答