Question

我在这里使用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);
}

Answer 1

我也遇到了这个问题。

我的条件是我的顶级下拉菜单项目将始终被第2周期幻灯片覆盖。我们通常知道在一个绝对块中有下拉菜单。每当我们点击或悬停时，子菜单项就会出现并显示出来。但同时，我们知道，它们不会被计入浮动布局并且具有0高度。

在此之前，我尝试设置容器div的相对位置，但是一旦我这样做，只要下拉子菜单出现，顶部菜单下方的滑块就会被按下。显然，这不是我想要的。

研究周期2小时后，我找到了这个解决方案：

.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周期幻灯片的顶部。是的，但如前所述，我们必须将其地位设定为相对位置。

Answer 2

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

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

需要为你的幻灯片放置一个外包装...相对位置，然后在其中定位标题。循环将幻灯片z-index递增1，因此z-index至少比幻灯片计数多一个

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

2 个答案: