分層圖像幻燈片

我有一個包含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

分層圖像幻燈片

回答

相關問題