Using the Z-index in CSS - html

Question

I have 3 divs. I am trying to place the #cover div behind the #cover-overlay div which should be behind the #user-stuff div. I can't seem to get my z-index to work quite right. What am I doing wrong?
JSFIDDLE: http://jsfiddle.net/BafSL/1/
My 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 only works on positioned elements, so you need to add a position to your 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 example

Answer 2

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