CSS Z-Index 不影响相对定位的图像

Question

我有一个似乎无法克服的 CSS 问题。我正在尝试将 container DIV 中的 img 向上推以与顶部 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 方 block 替换了图像，并删除了 overflow:hidden:

http://jsfiddle.net/g72xV/