Css DIV顺序与Z索引_Css_Background_Z Index

Css DIV顺序与Z索引

css

Css DIV顺序与Z索引,css,background,z-index,Css,Background,Z Index,我刚刚找到了一个完美的方式来显示我的摄影网站的背景图像的方式，我想。（通过搜索stackoverflow Post）我取出了我以前在代码中的内容，并用我发现的内容进行了一些小的编辑。但是，现在菜单或其他任何功能都不能正常工作我的页面顶部的链接无法点击我认为背景覆盖了整个页面，这就是为什么。我试着从我的代码中删除“background”DIV，它再次工作了，但是背景图像不再是位置，也按照我想要的方式使用我认为这与Z指数有关。有人能帮我修一下吗？并告诉我为什么会发生这种情况，这样我就可以避免

我刚刚找到了一个完美的方式来显示我的摄影网站的背景图像的方式，我想。（通过搜索stackoverflow Post）

我取出了我以前在代码中的内容，并用我发现的内容进行了一些小的编辑。但是，现在菜单或其他任何功能都不能正常工作

我的页面顶部的链接无法点击

我认为背景覆盖了整个页面，这就是为什么。我试着从我的代码中删除“background”DIV，它再次工作了，但是背景图像不再是位置，也按照我想要的方式使用

我认为这与Z指数有关。有人能帮我修一下吗？并告诉我为什么会发生这种情况，这样我就可以避免在代码中做进一步的操作

以下是JSFIDLE（便于查看/编辑）

body，html{
字体大小：11px；
字体系列：Verdana、Helvetica、Arial、无衬线字体；
边际：0px；
填充：0px；}
#背景{
位置：绝对位置；
顶部：0px；
左：0px；
溢出：隐藏；
宽度：100%；
身高：100%；
字体大小：粗体；
字体大小：30px；}
.掩护{
位置：绝对位置；
宽度：100%；
顶部：0px；
z-索引：-1；}
#容器{
显示：块；
明确：两者皆有；
文本对齐：居中；
填充顶部：40px；
}
.拇指{
文本对齐：左对齐；
显示：内联块；
保证金：5px；
填充：10px；
背景色：rgba（102102,0.5）；}
#菜单{
排名：0；
左：0；
保证金：0；
填充：0；}
#菜单ul{
列表样式类型：无；
左：0；
右：0；
位置：绝对位置；
显示：块；
高度：33像素；
保证金：0；
填充：0；
排名：0；
左：0；}
#菜单里{
显示：块；
浮动：左；
保证金：0；
填充：0；}
#菜单李a{
浮动：左；
颜色：#A79787；
文字装饰：无；
高度：24px；
填充：9px 15px 0；
字体大小：正常；}
#菜单a：悬停{
颜色：#fff；
背景色：rgba（102102,0.5）；
文本装饰：无；}
#切换{
浮动：对；
颜色：#A79787；
文字装饰：无；
高度：24px；
填充：9px 15px 0；
字体大小：正常；}
#切换a:悬停{
颜色：#fff；
背景色：rgba（102102,0.5）；
文本装饰：无；}

修改以下样式（我已将您的

z-index

从

.cover

移动到

#background

）：

当某物被定位在绝对位置时，它就会位于其他元素之上。因此，在您的例子中，您试图通过将

z-index

放在

.cover

上来抵消这一点。这不起作用，因为封面是背景的孩子，因此它的z-index是相对于背景（已经凌驾于一切之上）。

嗨，你能解释一下这个背景图片是为了什么吗，假设它覆盖整个页面，同时保持其纵横比。为什么？这样做还有另一个目的吗？因为如果你在你的身体上使用这个图像背景很容易：

body{background image:url(http://i.imgur.com/9dOAPlS.jpg“）；背景重复：无重复；背景位置：顶部居中；/*您可以管理图像的位置*/}

如果我这样做，图像的其余部分会被切断吗？这是一幅非常大的图像。不仅如此，这将是一个不断变化的形象。用户将单击箭头（左、右）更改背景以显示新照片。这是一个照片浏览网站，一个画廊。。。因此，对我来说，最重要的一点是，这个人能够以最好的质量看到整个图像，而不会造成巨大的加载时间。

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>

#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;}