Question

我正在使用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;
}

Answer 1

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

Answer 2

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

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

我在jsfiddle中为你做了一个例子： http://jsfiddle.net/eDR4v/1/

希望这有帮助。

Maximage插件位置：绝对

2 个答案: