CSS Z-インデックスは、相対的に配置された画像には影響しません。

Question

私は克服できないようなCSS問題があります。私はimgをcontainer DIVから上方に押して、上部DIVのimgをオーバーラップさせようとしています。

私は、うまくいかない方法をいくつか試しました。 Z-インデックスは画像のレイヤリングに何の影響もありません。Z-インデックスの理解は私が思っていたよりもはるかに悪く、いくつかの指針は本当に役立つでしょう。ここで

は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を持っていることを除いて正常に動作するようですトップイメージまで。

は、私はdivの正方形の画像を置き換え、このjsfiddleを参照してください、とだけoverflow:hiddenを削除：

http://jsfiddle.net/g72xV/