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/

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

1 个答案: