Question

我需要在响应式滑块中将徽标20px的图像重叠。徽标图像必须位于前面，响应滑块必须返回。请通过以下网址查看：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

希望这有帮助！

Answer 2

我会将顶部横幅包裹在另一个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;
}

Answer 3

使用

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

表示徽标元素，它将保留在滑块元素的顶部.z-index应该是定义的最高数字。

如何在响应滑块中重叠图像？

3 个答案: