0

我刚刚找到了一种完美的方式来以我想要的方式显示我的摄影网站的背景图像。（通过搜索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>
4

1 回答 1

2

修改以下样式（我已将您的z-indexfrom.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;}

当某物被定位时absolute，它就位于其他元素之上。因此，在您的情况下，您试图通过将z-indexon来抵消这一点.cover。这不起作用，因为.cover它是 的孩子#background，因此它z-index是相对于#background（它已经位于其他一切之上）。

于 2013-03-27T01:14:14.313 回答