我试图让我的内容的背景图片显示在页眉和页脚后面。目前,内容背景的顶部突出到页眉上,您可以看到底部略微覆盖了页脚(注意页脚边框颜色的细微变化)。我尝试设置将 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;
}
最佳答案
为了解决这个问题,你在页脚和页眉上使用了 z-index,但是你忘记了位置,如果要使用 z-index,元素必须有一个位置:
将此 CSS 添加到您的页脚和页眉:
position: relative;
已编辑:
还注意到#backstretch 上的背景图像有一个负的 z-index,不要使用它,有些浏览器会变得很奇怪......
从#backstretch 中删除:
z-index: -999999;
稍微阅读一下 Z-Index here!
关于html - Div 背景图片 Z-Index 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10507871/