Question

我有一个包含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放在幻灯片div

之上

Answer 1

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

Answer 2

我实际上在一个自制的jquery幻灯片放映之上放了一个div，除了IE6-IE8之外，它在所有浏览器中都能正常工作。

IE有一些奇怪的错误，你必须在顶部为div提供背景颜色才能拥有尺寸。并在之后使其透明以消除背景颜色......

另见my question about that problem。

分层图像幻灯片

2 个答案: