jQuery Cycle插件的問題

Question

這是原始的部門：

在應用jquery cycle插件后，圖像脫離其底部邊框，如下所示：

有什么想法嗎？

這是該部門的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索引更改，如@Orbling所說。 如果要使邊框位於旋轉器中圖像的頂部，則可以絕對或相對地定位它們，並使其z索引高於容器。

要解決的問題：明確放置下部波浪形“邊框”元素（ position:relative; or position:absolute;) *，並使其z索引高於旋轉元素的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;
}