z-index not working with other elements [closed]

[Awarageee]

I am trying to hide \[code\]footer\[/code\] behind \[code\]#blog-wrap\[/code\] but for some reason, it's not working. Using \[code\]z-index: -1;\[/code\] moves the element behind text, but that is about it. Here is the HTML for \[code\]footer\[/code\]\[code\]<footer> <span class="post-date"> Posted on <a href="http://stackoverflow.com/questions/8784102/#"> 12.12.12 </a> </span> <span class="post-comments"> & Has <a href="http://stackoverflow.com/questions/8784102/#"> 12 Comments </a> </span> <span class="tags"> <label> Tags: </label> <a href="http://stackoverflow.com/questions/8784102/#"> Music </a> </span></footer>\[/code\]and the CSS for \[code\]footer\[/code\], \[code\]#blog-wrap\[/code\] \[code\]section footer { background: green; width: 200px; border-radius: 5px; padding: 10px; position: absolute; top: 150px; z-index: -200; left: -100px;}#blog-wrap { background: #69b26d url(../images/blog-wrap-bg.png) repeat; box-shadow: inset 0 0 7px rgba(0, 0, 0, .6), 0 -1px 1px rgba(255, 255, 255, .8); border-radius: 3px; float: left; margin: 40px ; padding: 14px; width: 500px; letter-spacing: 1px; line-height: 25px; text-shadow: 1px 1px 1px rgba(0, 0, 0, .4); position: relative; z-index: 500;}\[/code\]See anything wrong with the above code? \[code\]footer\[/code\] just won't simply move behind \[code\]#blog-wrap\[/code\]