2

我有一个非常简单的 html，里面有一个“包装器”div 和其他两个元素。

<div id="wrapper">
    <div id="logo">
     <img src="images/myLogo.jpg" />
    </div>
    <ul id="menu">
     <li class="class_link1"><a href="#">Menu item 1</a></li>
     <li class="class_link2"><a href="#">Menu item 2</a></li>
     <li class="class_link3"><a href="#">Menu item 3</a></li>
     <li class="class_link4"><a href="#">Menu item 4</a></li>
     <li class="class_link5"><a href="#">Menu item 5</a></li>
    </ul>
</div>

使用 CSS，我将徽标和菜单放在屏幕底部的单个栏中。

在我的 jQuery 代码中，我在 div#wrapper 之后使用 XML 动态插入另一个 div (#photos)。所以，我最终的 html 最终是这样的：

<div id="wrapper">
    <div id="photos">
        <img src="photo1.jpg" alt="desc 1" />
        <img src="photo2.jpg" alt="desc 2" />
        ....
    </div>
    <div id="logo">
     <img src="images/myLogo.jpg" />
    </div>
   <ul id="menu">
     <li class="class_link1"><a href="#">Menu item 1</a></li>
     <li class="class_link2"><a href="#">Menu item 2</a></li>
     <li class="class_link3"><a href="#">Menu item 3</a></li>
     <li class="class_link4"><a href="#">Menu item 4</a></li>
     <li class="class_link5"><a href="#">Menu item 5</a></li>
    </ul>
</div> <!-- wrapper -->

这是CSS：

#wrapper{
 position: relative;
 margin: 0px auto;
 padding: 0px;
 height: 685px;
 width: 1019px;
 z-index: 0;
}

#wrapper ul#menu {
 position: absolute;
 margin: 0px;
 padding: 0px;
 list-style: none;
 clear: both;
 left: 510px;
 top: 525px;
 z-index: 1;
}

#wrapper #logo {
 position: absolute;
 height: 72px;
 width: 510px;
 left: 0px;
 top: 525px;
 z-index: 1;
}

我现在需要的是在背景中使用 div#photos 制作幻灯片。菜单栏和徽标必须位于顶部。我正在使用 Cycle 插件，但到目前为止没有成功。任何帮助将非常感激。

提前致谢，

赫利欧

4

2 回答 2

1

尝试给 logo 一个 -1 的 z-index，应该可以。

于 2010-03-02T14:04:40.440 回答
1 
#photos { z-index: 1; }
#logo { z-index: 2; }

此外，不需要那么具体#wrapper #logo——每页只能有一个 id，这样#logo就足够了。

于 2010-03-02T14:10:39.223 回答