-2

私は3つの部門を持っています。#user-stuff div の後ろにある #cover-overlay div の後ろに #cover 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配置された要素でのみ機能するため、user-stuff 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 に答える