Question

我想在图片上张贴横幅。图像和横幅（banner-snippet）都在同一个父元素中，因此黑色横幅被推出视图。我该如何解决这个问题。

您可以在此处查看我的来源：

<div id="slide-banner">
    <img src="http://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg"/>
    <div id="slide-banner-snippet">
    </div>
</div>

#slide-banner {
    margin-top: 70px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px 0px 0px 0px;
    height: 350px;
    width: 916px;
    border: 1px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    overflow: hidden;
}

#slide-banner img {
    height: auto;
    width: 916px;
}

#slide-banner-snippet {
    height: 55px;
    width: 916px;
    background-color: #000;
}

http://jsfiddle.net/uSw8S/

Answer 1

绝对定位要浮动的元素，即：

position:absolute;
top:0;
z-index:1;

Answer 2

您可以#slide-banner相对定位并使slide-banner-snippet绝对定位并添加bottom:0;

#slide-banner {
    margin-top: 70px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px 0px 0px 0px;
    height: 350px;
    width: 916px;
    border: 1px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    overflow: hidden;
    position:relative;
}

#slide-banner img {
    height: auto;
    width: 916px;
}

#slide-banner-snippet {
    height: 55px;
    width: 916px;
    background-color: #000;
    position:absolute;
    bottom:0;
}

http://jsfiddle.net/uSw8S/2/

Answer 3

你可以放

<div id="slide-banner-snippet">
    </div>

前

<img src="http://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg"/>

示例Here

重叠Div定位

3 个答案: