I have a div containing jQuery image slideshow, i want to put another div/layer on top of the slideshow. Is it possible? Is it as simple as setting both div z-index css property?
<!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>
I want half of 'content_right' div lay on top of slideshow div