如何在響應滑塊中重疊圖像？

我需要將徽標20像的圖像重疊在響應滑塊中。徽標的圖像必須位於前方，並且響應滑塊必須返回。請觀看現場直播：http://www.pahari.com.np 如何在響應滑塊中重疊圖像？

**HTML PART:** 
<div id="top_banner"> <div id="logo"><img src="image/logo.jpg"> </div> </div> 
<div id="slider_bg"> <?php include_once("slider.php"); ?> </div> 
<div id="menu_bg"> </div> 
<div id="content_bg"> <div id="content"> </div> </div> 


**CSS PART:** 
<style> 
#top_banner{ 
width: 1000px; 
height: 106px; 
margin: auto; 
} 
#logo{ 
width: 362px; 
background: url(images/logo.jpg) no-repeat; 
height: 106px; 
float: left; 
} 
#slider_bg{ 
float: left; 
height: 380px; 
} 
#menu_bg{ 
background: #B1BB34; 
height: 30px; 
} 
#content_bg{ 
background: #A562B1; 
height: 180px; 
margin-top: 25px; 
} 
#content{ 
background: url("image/bg.jpg") no-repeat; 
width: 1000px; 
margin: auto; 
height: 180px; 
margin-top: 25px; 
} 
<style>

來源

2014-06-16 Jklyn

您可以創建一個小提琴併發布鏈接？ –

這只是和圖像，因此不是很有用。請創建一個小提琴或至少在您自己的服務器上正確構建網站。 –

最簡單的方法是將您的slider1_container與頂部負值並添加負z索引位置。例如：

top:-2em; 
z-index:-1

希望得到這個幫助！

來源

2014-06-17 15:22:34 morgul

是的，它的工作原理。謝謝你的建議。 – Jklyn

我會將頂部橫幅包裹在另一個div中，並使用絕對定位。請注意，我只是將部分代碼用於小提琴的顯示目的。您需要相應地將其添加到您的網站。

檢查了這一點：http://jsfiddle.net/3Z2JZ/

CSS

body{ 
    background: url(images/bg.jpg) #FFFFFF repeat-x; 
    font: normal 12px verdana; 
    color: #9C9C9C; 
    margin: 0; 
    padding: 0; 
} 
#top_banner_wrap { 
    position: absolute; 
    width: 100%; 
} 

#top_banner{ 
    position: relative; 
    width: 1000px; 
    height: 106px; 
    margin: auto; 
} 
#logo{ 
    width: 362px; 
    background: url(images/logo.jpg) no-repeat; 
    height: 106px; 
    float: left; 
} 
#slider_bg{ 
    float: left; 
    width: 100%; 
    height: 380px; 
    background-color: red; 
    margin-top: 86px; 
}

來源

2014-06-17 15:16:17

但仍然徽標圖像被響應滑塊重疊。上面的解決方案由morgul提供。感謝建議。 – Jklyn

使用

#logo { 
     position: relative; 
     z-index:100; 
}

爲標誌元素，它會留在滑塊element.z指數的頂部應次數最多的定義。

來源

2018-02-24 20:27:01

如何在響應滑塊中重疊圖像？

回答

相關問題