Div不合并

Question

我有这个布局：

我正在尝试使用幻灯片显示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;
}

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

我正在尝试这样做：

Answer 1

我认为＆＃34; merge＆＃34;你的意思是重叠。

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

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

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