Div不合并

时间:2013-08-09 21:01:25

标签: html css

我有这个布局:

screenshot

我正在尝试使用幻灯片显示div,这是红色的,高于标题部分。

我尝试了z-index以及许多其他方法,但无法让布局正常工作。

这是我的代码:`

<div id="box">
    <div class="clear"></div>
    <div id="slideshow">
        <ul>
            <li>
                <img src="imagens/1.png" alt="Curso 1" class="banner" />
            </li>
            <li>
                <img src="imagens/2.png" alt="Curso 2" class="banner" />
            </li>
            <li>
                <img src="imagens/3.png" alt="Curso 3" class="banner" />
            </li>
            <li>
                <img src="imagens/4.png" alt="Curso 4" class="banner" />
            </li>
        </ul>
    </div>
    <div class="clear"></div>
    <div id="header">
        <div id="logo">
            <a href="#"><img src="imagens/logo.png" id="" /></a>
        </div><!--logo-->
        <div id="menu">
            <ul>
                <a class=""><li>HOME</li></a>
                <a class=""><li>PROGRAMAÇÃO</li></a>
                <a class=""><li>PALESTRANTES</li></a>
            </ul>
        </div>
    </div><!--header-->
</div>

这个CSS:

.clear {
    clear: both;
}
#box {
    width:980px;
    margin: 0 auto;
    background-color:red;
}
#header {
    z-index: 3;
}
#slideshow {
    height:286px;
    width:980px;
    z-index: 0;
    float: right;
}
#slideshow ul {
    list-style: none;
}
#slideshow img {
    overflow: hidden;
    height:286px;
    width:980px;
}

我该怎么做才能解决这个问题?

我正在尝试这样做:screenshot

1 个答案:

答案 0 :(得分:2)

我认为&#34; merge&#34;你的意思是重叠。

要使徽标和导航(#header)与其上方的幻灯片显示(#slideshow)重叠,您需要在#header上添加负上边距。您还需要向元素添加位置以使z-index起作用。

#header {
  position:relative;
  z-index: 3;
  margin-top:-200px;
}

执行此操作后,您可能需要增加z-index的{​​{1}}属性,以使其与幻灯片重叠。