CSS Z索引不影响相对定位的图像

Question

我有一个CSS问题，似乎无法解决。我正试图将img从container DIV向上推，以与顶部DIV中的img重叠。

我试过很多不起作用的方法。Z-Index对图像的分层没有任何影响，我对Z-Index的理解比我想象的要糟糕得多，一些指导会非常有帮助。

这是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>

我的CSS规则

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

您的代码似乎工作得很好，只是容器上有overflow:hidden，它可以防止底部图像上升到顶部图像。

请看这个jsfiddle，我用div正方形替换了图像，并且刚刚删除了overflow:hidden:

http://jsfiddle.net/g72xV/