CSS Z-Index not affecting relatively positioned images - css

Question

I have a CSS problem that I can't seem to overcome. I'm attempting to push the img from the container DIV upwards to overlap the img in the top DIV.
I've tried quite a few methods that don't work. Z-Index doesn't have any effect on the layering of the images, my understanding of Z-Index is far worse than I thought it was and some guidance would be really helpful.
Here is the HTML:
<!-- DIV CONTAINS THE HEADER IMAGE AND SOCIAL MEDIA PLUGINS
Padding: 0; Margin: 0; Border:0; -->
<div id="head-image" class="image">
<!-- SOCIAL LINKS HERE -->
<img src="images/mainImg.png" alt="" />
</div>
<!-- DIV CONTAINS ALL THE CONTENT ON THE PAGE
padding:10px; Margin:0; Border:0; -->
<div id="container">
<div id="mapPlace">
<img src="images/activityIcons/map.jpg" alt="" />
</div>
<!-- TEXT DIV HERE -->
</div>
And my CSS rules
img {
position:relative;
}
#head-image {
position:relative;
width:520px;
height:482px;
z-index:5;
}
#head-image img {
z-index:5;
}
#mapPlace {
position:absolute;
top:-80px;
}
#mapPlace img {
z-index:10;
}
#container {
position:relative;
float:left;
clear:both;
min-height:100%;
padding:2%;
width:96%;
background-color:#000;
overflow:hidden;
color:#fff;
z-index:10;
}

Answer 1

Your code seems to work fine except that you have overflow:hidden on the container, which keeps the bottom image from ever getting up to the top image.
See this jsfiddle where I replace the images with div squares, and just removed the overflow:hidden:
http://jsfiddle.net/g72xV/