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

我有一个CSS问题，我似乎无法克服。我试图从container DIV向上推动img以覆盖顶部DIV中的img。CSS Z-Index不影响相对定位的图像

我已经尝试了很多不行的方法。 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; 
}

来源

2012-02-29 David Barker

请忽略在CSS命名约定的差异。我正在接管别人的代码。 – 2012-02-29 16:05:34

你的代码似乎除了你有overflow:hidden容器，保持底部图像从以往任何时候都混得很好地工作直到顶部图像。

看到这个的jsfiddle在那里我与格方块代替的图像，只是删除了overflow:hidden：

http://jsfiddle.net/g72xV/

来源

2012-02-29 16:13:39 Dave

感谢戴夫，这是整理它。总是惊讶于我有时可能无法察觉。 – 2012-02-29 16:17:46

不用担心 - 很高兴帮助！ – Dave 2012-02-29 16:25:15

只是FYI - 如果你已经把它们放在父母身上，我认为你甚至不需要图像上的z-index ...我很确定z-index是继承的。 – Dave 2012-02-29 16:26:28

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

回答

相关问题