我刚刚找到了以我想要的方式显示我的摄影网站背景图片的完美方式。 (通过搜索 stackoverflow 帖子)
我删除了我之前在代码中的内容，并将其替换为经过一些小修改后发现的内容。但是，现在菜单或其他任何功能都无法正常运行。
例。我页面顶部的链接无法单击。
我认为背景覆盖了整个页面，这就是原因。我尝试从我的代码中删除“背景”DIV，一切都再次起作用，但背景图像不再定位，也按照我想要的方式使用。
我认为这与 Z-Index 相关。有人可以帮我解决这个问题吗？并告诉我为什么会这样，这样我就可以避免在代码中做更多的事情。
这是 JsFiddle(便于查看/编辑) http://jsfiddle.net/3kke4/
body, html{
font-size:11px;
font-family:Verdana,Helvetica,Arial,sans-serif;
margin : 0px;
padding : 0px;}
#background{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
width : 100%;
height : 100%;
font-weight : bold;
font-size : 30px;}
.cover{
position : absolute;
width : 100%;
top : 0px;
z-index : -1;}
#container{
display:block;
clear:both;
text-align: center;
padding-top:40px;
}
.thumb{
text-align:left;
display:inline-block;
margin:5px;
padding:10px;
background-color:rgba(102,102,102,0.5);}
#menu{
top:0;
left:0;
margin:0;
padding:0;}
#menu ul{
list-style-type:none;
left:0;
right:0;
position:absolute;
display:block;
height:33px;
margin:0;
padding:0;
top:0;
left:0;}
#menu li{
display:block;
float:left;
margin:0;
padding:0;}
#menu li a{
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;}
#menu li a:hover{
color:#fff;
background-color:rgba(102,102,102,0.5);
text-decoration:none;}
#toggle a{
float:right;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;}
#toggle a:hover{
color:#fff;
background-color:rgba(102,102,102,0.5);
text-decoration:none;}
<body>
<div id='background'>
<img src='http://i.imgur.com/9dOAPlS.jpg' class='cover'/>
</div>
<div id='navigation'>
<div>
<ul id='menu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Albums</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<div id='toggle'>
<a href='#'>Hide All</a>
</div>
</div>
<div id='container'>
</div>
</body>
最佳答案
修改以下样式(我已将您的 z-index 从 .cover 移至 #background):
#background{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
width : 100%;
height : 100%;
font-weight : bold;
font-size : 30px;
z-index : -1;}
.cover{
position : absolute;
width : 100%;
top : 0px;}
当某物被绝对定位时，它就会位于其他元素之上。所以在你的情况下，你试图通过将 z-index 放在 .cover 上来抵消它。这是行不通的，因为 .cover 是 #background 的子项，因此它的 z-index 是相对于 #background (它已经高于一切)。
关于css - DIV 顺序和 Z-Index，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15650277/