css - 重叠 div 定位

Question

我想在图像上有一个横幅。图像和横幅（横幅片段）都在同一个父元素中，因此黑色横幅被推到视野之外。我怎样才能解决这个问题。

你可以在这里看到我的来源：

<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"/>

示例在这里