在 jQuery Cycle 幻灯片放映上方的 z-index 处显示 div答案

【问题标题】：Displaying a div at a z-index above a jQuery Cycle slide show在 jQuery Cycle 幻灯片放映上方的 z-index 处显示 div
【发布时间】：2011-07-18 16:58:41
【问题描述】：

我在这里使用jQuery cycle plugin：http://www.mitchsflowers.dreamhosters.com/

幻灯片位于相对定位的 div 中，它包含一个绝对定位的 div 来保存标题。这个 div 位于自行车图像上方，但无论我给标题 div 提供什么 z-index，图像都会隐藏它。

有没有办法让我的标题 div 高于循环图像？

#homeslides {
    margin:0 auto;
    width:985px;
    height:420px;
    overflow:hidden;
    position:relative;
    padding-top:12px;
}

#homeslideCaptions {
    position:absolute;
    bottom:0;
    width:907px;
    height:57px;
    z-index:2000000;
    background:rgba(0,0,0,0.5);
}

【问题讨论】：

标签： jquery-plugins z-index cycle

【解决方案1】：

我也遇到了这个问题。

我的情况是我的顶部下拉菜单项将始终被第 2 轮幻灯片覆盖。我们知道通常我们在一个绝对块中有下拉菜单。每当我们单击或悬停时，子菜单项都会出现并显示。但同时，我们知道，它们不会被计入浮动布局并且高度为 0。

以前，我尝试设置容器 div 的相对位置，但是一旦这样做，每当下拉子菜单出现时，顶部菜单下方的滑块就会被向下推。显然，这不是我想要的。

经过两个小时的学习周期，我找到了这个解决方案：

.cycle-slideshow {
 z-index: 0; // or any smaller value to the covered div's
}

其实很简单。

好的，让我与您分享更多关于此的内容。

在循环 2 js 中，我们可以发现，默认情况下，循环 2 会将主幻灯片项 z-index 初始化为 maxZ: 100

// @see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
    ....
    maxZ:             100,
    ...
}

所有其他幻灯片的 z-index 将增加 -1，例如 99、98 等。

您可能会想，好吧，如果我将 div z-index 设置为 101 或更大，它将位于第 2 周期幻灯片的顶部。没错，但如前所述，我们必须将其位置设置为相对。

【讨论】：

【解决方案2】：

在这里得到答案：http://forum.jquery.com/topic/displaying-a-div-at-a-z-index-above-a-jquery-cycle-slide-show-18-7-2011

captions div 位于幻灯片容器内......因为孩子将被视为幻灯片。

您的幻灯片需要一个外包装...位置相对，然后在其中放置标题。 Cycle 会将幻灯片的 z-index 增加 1，因此 z-index 至少比幻灯片计数大 1 会起作用

【讨论】：