проблема с плагином jQuery Cycle

Question

Это было первоначальное деление:

после применения плагина цикла jquery изображение выходит из своей нижней границы следующим образом:

Есть идеи, почему?

Вот код деления:

#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-индекс выше, чем у контейнера.

Исправить: Явно расположите нижний волнистый элемент "border" (position:relative; or position:absolute;)*) и задайте ему z-индекс выше, чем у вращающего элемента.

*, дающий элементу более высокий z-индекс, чем ротатор, будет не работать , если элемент не расположен явно. см http://www.webdevout.net/test?0_

Answer 2

Плагин цикла использует z-индекс, который, вероятно, является источником вашей проблемы. Из кода подключаемого модуля цикла:

// 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)
    });

Я бы поиграл с z-индексом "волны" и посмотрел, не поможет ли это.

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