DIV秩序和Z-指数

我刚刚发现显示我的背景图片为我的摄影网站，我想要的方式完美的方式。（通过搜索帖子计算器）DIV秩序和Z-指数

我拿出我在我的代码之前曾与我有一些小的编辑找到取代它。但是，现在菜单或其他功能都无法正常工作。

Ex。我的页面顶部的链接不能被点击。

我觉得背景覆盖整个页面，这就是原因。我尝试从我的代码中删除“背景”DIV，并且它都可以再次运行，但背景图像不再位置并且以我想要的方式使用。

我认为这是Z-指数有关。有人可以帮我解决这个问题吗？并告诉我为什么发生这种情况，这样我就可以避免在代码中做更多的事情。

这里是的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>

来源

2013-03-27 John Doe

嗨，你能解释一下什么是''

用于孔页面或什么背景图片的目的是什么？ – jhunlio 2013-03-27 01:14:11

是的，它是假设覆盖整个页面，同时保持它的纵横比。为什么？ – 2013-03-27 04:25:56

有另一个目的，因为它很容易，如果你使用图像背景到你的身体的例子：'body {background-image：url（http://i.imgur.com/9dOAPlS.jpg'）;背景重复：不重复; background-position：top center;/*你可以管理你想放置图像的位置* /}' – jhunlio 2013-03-27 04:31:56

修改以下样式（我搬到你的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 ly，那么它位于其他元素之上。因此，在您的情况下，您试图通过将z-index置于.cover来抵消该情况。这不会起作用，因为.cover是#background一个孩子，因此它的z-index相对于#background（已经坐在高于一切）。

来源

2013-03-27 01:14:14 Jace

啊，真是那么简单啊。谢啦！ – 2013-03-27 01:20:49

DIV秩序和Z-指数

回答

相关问题