Question

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

Answer 1

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

当某物位于absolute时，它会位于其他元素之上。因此，在您的情况下，您试图通过将z-index放在.cover上来抵消这种情况。这不起作用，因为.cover是#background的孩子，因此z-index相对于#background（已经位于其他所有内容之上）。

DIV订单和Z-Index

1 个答案: