Html Div 背景图像 Z-Index 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10507871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div Background Image Z-Index Issue
提问by Jon
I am trying to get the background image of my content to appear behind the header and footer. Currently, the top of the content's background is sticking out onto the header, and you can see that the bottom has slightly covered the footer (notice the slight change of the footer's border colour). I have tried setting applying z-index:-100;to content which worked but also makes the text unselectable. I then tried applying z-index:1;to content, but that did not make the content appear under the header/footer.
我试图让我的内容的背景图像出现在页眉和页脚后面。目前，内容背景的顶部突出到页眉上，您可以看到底部略微覆盖了页脚（注意页脚边框颜色的轻微变化）。我曾尝试将应用设置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;
}
回答by Zuul
To solve the issue, you are using the z-index on the footer and header, but you forgot about the position, if a z-index is to be used, the element must have a position:
为了解决这个问题，你在页脚和页眉上使用了 z-index，但是你忘记了位置，如果要使用 z-index，元素必须有一个位置：
Add to your footer and header this CSS:
添加到您的页脚和标题此 CSS：
position: relative;
EDITED:
编辑：
Also noticed that the background image on the #backstretch has a negative z-index, don't use that, some browsers get really weird...
还注意到#backstretch 上的背景图像具有负的 z-index，不要使用它，某些浏览器变得非常奇怪......
Remove From the #backstretch:
从#backstretch 中删除：
z-index: -999999;
Read a little bit about Z-Index here!
在这里阅读一些关于Z-Index 的内容！
回答by Steve
For z-index to work, you also need to give it a position:
为了让 z-index 起作用，你还需要给它一个位置：
header {
width: 100%;
height: 100px;
background: url(../img/top.png) repeat-x;
z-index: 110;
position: relative;
}
回答by rafaelbiten
Set your header and footer position to "absolute" and that should do the trick. Hope it helps and good luck with your project!
将您的页眉和页脚位置设置为“绝对”，这应该可以解决问题。希望它对您的项目有所帮助并祝您好运！
