0

我有这个布局：

截屏

我正在尝试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;
}

我能做些什么来解决这个问题？

我正在尝试做这样的事情：截屏

4

1 回答 1

2

我认为“合并”是指重叠。

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

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

完成此操作后，您可能需要增加 的z-index属性#header以使其与幻灯片重叠。

于 2013-08-09T21:53:13.967 回答