重疊Div定位

我希望橫幅上有橫幅。圖像和橫幅（橫幅片段）都位於同一父元素中，因此黑色橫幅被推出視圖。我怎樣才能解決這個問題。重疊Div定位

你可以看到我的源位置：

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

來源

2012-07-23 Matt

當你說***跨越***，你字面上的意思是「橫幅」應該疊加在「圖像」上嗎？ – arttronics 2012-07-23 02:39:10

絕對定位要浮動元素，即：

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

來源

2012-07-23 02:17:59 RhinoWalrus

您可以#slide-banner相對定位並使slide-banner-snippet絕對定位和a DD 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/

來源

2012-07-23 02:28:01 Musa

你可以把

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

前

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

例Here

來源

2012-07-23 07:10:29

回答

相關問題