1

我正在使用 Maximage jquery 插件来创建全屏幻灯片。该插件允许您包含分层在背景图像顶部的 HTML 元素。我想使用 HTML 为每个图像提供标题，并将标题分层放在我的网站页脚顶部（与 Maximage 分开）。我尝试了各种定位，但找不到方法，由于元素的顺序，标题总是在页脚后面。有谁知道我该怎么做？在 maximage 插件呈现后，我的代码如下 -

<div role="main">
<img id="cycle-loader" src="img/ajax-loader.gif" style="display: none;">
<div id="maximage" class="mc-cycle" style="width: 1282px; height: 294px; overflow: hidden; display: block;">
   <div class="mc-image " data-href="" style="background-image: url("img/showcase/1-redmire.jpg"); position: absolute; top: 0px; left: 0px; display: block; z-index: 8; opacity: 1; width: 1282px; height: 294px;" title="">
      <div class="slide-caption">
         <p>Bespoke house in Mercaston, Derbyshire. Image produced for client issue.</p>
      </div>
   </div>
</div>
</div>
<footer>
   <a id="arrow_left" href=""></a>
   <a id="arrow_right" href=""></a>
   <div id="controls"></div>
</footer>

和 CSS -

footer 
{ 
   bottom: 0px; 
   position: fixed; 
   width: 100%; 
   background: url(../img/bg-black.png) repeat; 
   color: #FFF; 
   height: 55px; 
   line-height: 55px; 
   border-bottom: 1px solid #333;  
}
.slide-caption 
{ 
   position: fixed; 
   z-index: 998; 
   bottom: 20px; 
   left: 20px; 
   color: #ffffff; 
   background: #000000; 
   padding: 5px;
}
4

2 回答 2

0

您的问题似乎与一般 HTML 样式限制有关。使用 z-indexes 时的一般规则是 z-index 文档树中位于同一级别的元素：因此在您的示例中，它将是 z-indexingdiv[role="main"]和 z-indexing <footer>。对于一些现代浏览器，这可以通过块级元素来完成，但是如果您试图准确地回退到旧浏览器或绝对定位元素（这就是 Henrik 无法复制您的问题的原因），则不一致。我不知道如何在绝对定位的父元素和子元素之间滑动外来元素......如果有人这样做，请告诉我。

我能看到的最简单的解决方案是将标题拉出并使用 jQuery 将其动态写入页脚。这可以通过 Cycle 的 before() 和 after() 动画回调（http://jquery.malsup.com/cycle/options.html）轻松完成。

我已经在 jsfiddle 中为您创建了一个示例：http: //jsfiddle.net/eDR4v/1/

希望这会有所帮助。

于 2012-07-09T16:28:39.140 回答
0

您提供的代码似乎可以完成这项工作，不是吗？当我将其插入 jsfiddle http://jsfiddle.net/YemKf/时，标题显示在页脚上方。

于 2012-07-07T23:46:15.477 回答