分层图像幻灯片
我有一个包含jQuery图像幻灯片的div，我想把另一个div /图层放在幻灯片上。可能吗？是不是像设置div z-index css属性一样简单？分层图像幻灯片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#SlideShow { display: none; width: 868px; height: 296px; }
-->
</style>
<script type="text/javascript" src="includes/jquery-1.4.1.js"></script>
<script type="text/javascript" src="includes/jquery.cj-simple-slideshow.js"></script>
<script type="text/javascript">
<!--
$(function() {
$(document).ready(function() {
//initialize the first slideshow container
$("#SlideShow").cjSimpleSlideShow();
});
});
//-->
</script>
</head>
<body>
<table width="100%" align="center" cellpadding="0" cellspacing="0" class="main">
<tr>
<td width="50%"> </td>
<td><div class="header_top"><div class="header_logo"><img src="images/logo.png" alt="Logo" width="120" height="148" border="0" /></div>
<div class="header_text"><img src="images/header_text.png" alt="" width="573" height="84" border="0" /></div>
</div>
<div class="header_image" style="z-index:0;"><div id="SlideShow" style="display:none;">
<img src="images/header_image.jpg" width="868" height="296" alt="This is caption 1." /><br />
<img src="images/header_image1.jpg" width="868" height="296" alt="This is caption 2." /><br />
<img src="images/header_image2.jpg" width="868" height="296" alt="This is caption 3." /><br />
</div>
</div><div class="content">
<div class="content_inner"><div><img src="images/heading_2.png" alt="Content" /></div>
<p>Content.</p>
<p>Content.</p>
<p>Content.</p></div>
<div class="content_right">
<div><img src="images/heading_1.png" alt="Content" /></div>
<p><br />
Content.</p>
<p>Content.</p>
<p>Content. </p>
<p>Content.</p>
<p>Content<br />
<br />
</p>
</div><br />
<div class="content_service"><div><img src="images/heading_3.png" alt="Content" /></div>
</div>
</div>
</td>
<td width="50%"> </td>
</tr>
</table>
</body>
</html>
我想“content_right”的半格上的幻灯片DIV的顶部铺设
您可能能够使用z-index属性，或者你也许可以在您需要的DIV使用position: absolute;出现在幻灯片上方。
#top_most_element
{
z-index: 99; /* or whatever, just so long as it's higher than those elements 'below' it */
}
或者，使用position: absolute;替代：
#container_element
{
position: relative; /* in order to position the child-element relative to this element, not the window or other parent element */
}
#top_most_element
{
position: absolute;
}
<div id="container_element">
<div class="slide">...</div>
<div class="slide">...</div>
<div id="top_most_element">
<!-- content to show -->
</div>
</div>
这可能会，也可能不会，但工作，这取决于你使用创建幻灯片什么JavaScript的解决方案，它是如何工作的。如果你可以发布（js/jQuery/etc和相关的（x）html和css），那么我们可能会更有效地帮助你。
其实我已经穿上的自焙jQuery的幻灯片放映顶部的股利和它正常工作在所有浏览器，除了IE6 - IE8。
IE有某种怪异的bug，你必须给一个背景色之上的股利，以便它有尺寸。并使其透明随后摆脱的背景色...
Jeroen，我把我的代码放在上面。错在哪里？ Thx – 2010-04-11 09:36:50
嗯，首先我不知道你使用的幻灯片，除此之外，你需要展示相关的CSS并解释问题所在。 – jeroen 2010-04-11 18:33:22
我已经把我的代码放在上面，如何解决这个问题。我的代码有问题吗？ – 2010-04-11 09:38:15