css - 如何在响应 slider 中重叠图像？

Question

我需要在响应式 slider 中将 Logo 图像向下重叠 20 像素。 Logo 图像必须在前面，响应式 slider 必须在后面。请观看直播: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>

Answer 1

最简单的方法是将 slider1_container 的顶部设置为负值并添加负 z-index。例如:

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

希望对您有所帮助!