jQuery Cycle 插件的问题

Question

这是原始划分：

应用 jquery 循环插件后的图像像这样离开底部边框：

有什么想法吗？

这是分区的 css：

#hero {
float: right;
border-top: 1px solid #FFF;
width: 725px;
height: 370px;
background: #666;
}

#wave {
width: 970px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background: url(../img/wave.png) no-repeat bottom left;
}

Answer 1

位置从相对位置更改为绝对位置（通过循环插件），这导致 z-index 发生变化，就像 @Orbling 所说的那样。如果您希望边框位于旋转器中图像的顶部，则可以绝对或相对地定位它们，并为它们指定高于容器的 z 索引。

修复方法：显式定位下部波浪“边框”元素（position:relative; 或position:absolute;）* 并为其指定高于旋转器元素的 z 索引。

*如果元素未明确定位，则为元素提供比旋转器更高的 z 索引将不起作用。请参阅 http://www.webdevout.net/test?0_

Answer 2

循环插件使用 z-index，这可能是您问题的根源。从循环插件代码来看：

// set position and zIndex on all the slides
    $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
        var z;
        if (opts.backwards)
            z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
        else
            z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
        $(this).css('z-index', z)
    });

我会使用“wave”的 z-index 来看看这是否有帮助。

#wave {
width: 970px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background: url(../img/wave.png) no-repeat bottom left;
z-index: 99;
}