分层图像幻灯片

我有一个包含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%">&nbsp;</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%">&nbsp;</td> 
    </tr> 
</table> 
</body> 
</html>

我想“content_right”的半格上的幻灯片DIV的顶部铺设

来源

2010-04-10 Ivan Slaughter

您可能能够使用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），那么我们可能会更有效地帮助你。

来源

2010-04-10 17:41:36

我已经把我的代码放在上面，如何解决这个问题。我的代码有问题吗？ – 2010-04-11 09:38:15

其实我已经穿上的自焙jQuery的幻灯片放映顶部的股利和它正常工作在所有浏览器，除了IE6 - IE8。

IE有某种怪异的bug，你必须给一个背景色之上的股利，以便它有尺寸。并使其透明随后摆脱的背景色...

另见my question about that problem。

来源

2010-04-10 17:59:25 jeroen

Jeroen，我把我的代码放在上面。错在哪里？ Thx – 2010-04-11 09:36:50

嗯，首先我不知道你使用的幻灯片，除此之外，你需要展示相关的CSS并解释问题所在。 – jeroen 2010-04-11 18:33:22

分层图像幻灯片

回答

相关问题