jquery - Maximage 插件位置 :absolute

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

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

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

我在 jsfiddle 中为您模拟了一个示例: http://jsfiddle.net/eDR4v/1/

希望这对您有所帮助。