-2

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

JSFIDDLE：http: //jsfiddle.net/BafSL/1/

我的 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;
}
4

2 回答 2

4

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 示例

于 2013-02-25T15:08:35.997 回答
1

position中没有#user-stuff：

#user-stuff {
    margin: 0px 0px 0px 0px;
    padding: 40px 0px 20px 10px;
    height: auto;
    width: 400px;
    z-index: 20;
    position: relative;
}
于 2013-02-25T15:10:06.427 回答