Question

我有3个div。我试图将#cover div放在＃cover-overlay div后面，它应该在＃user-stuff div后面。我似乎无法让我的z-index工作得很好。我究竟做错了什么？

我的CSS：

#cover {
position: relative;
height: 350px;
width: 920px;
/*  background: url('http://images.nationalgeographic.com/wpf/media-    
live/photos/000/621/cache/praia-dos-tres-irmaos-beach-portugal_62194_990x742.jpg') no-   
repeat center center; */ 
background: url('https://sphotos-b.xx.fbcdn.net/hphotos-
ash4/486464_10150990114607410_529660447_n.jpg') no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}

#cover-overlay {
position: absolute;
top: 0px;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0,    
0.54902) 100%);
background-origin: padding-box;
background-size: auto;
bottom: 50px;
color: rgb(51, 51, 51);
display: block;
font-family: Arial, sans-serif;
font-size: 14px;
height: 200px;
line-height: 16px;
position: absolute;
text-align: center;
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
width: 100%;
z-index: 10;
}

#user-stuff {
margin: 0px 0px 0px 0px;
padding: 40px 0px 20px 10px;
height: auto;
width: 400px;
z-index: 20;
}

Answer 1

z-index仅适用于定位元素，因此您需要为用户资料div添加位置。

#user-stuff {
    margin: 0px 0px 0px 0px;
    padding: 40px 0px 20px 10px;
    height: auto;
    width: 400px;
    position:relative;
    z-index: 20;
}

<强> jsFiddle example

Answer 2

position中没有#user-stuff：

#user-stuff {
    margin: 0px 0px 0px 0px;
    padding: 40px 0px 20px 10px;
    height: auto;
    width: 400px;
    z-index: 20;
    position: relative;
}

在CSS中使用Z-index

2 个答案: