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

Question

我在这里使用jQuery循环插件: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周期幻灯片的顶部.是的,但正如之前所说,我们必须将其地位设定为相对的.