Отображение div по z-индексу над слайд-шоу jQuery Cycle - PullRequest
Новая
       31

Отображение div по z-индексу над слайд-шоу jQuery Cycle

0 голосов
/ 18 июля 2011

Я использую плагин jQuery для цикла здесь: http://www.mitchsflowers.dreamhosters.com/

Слайды находятся в относительно позиционированном элементе div и содержат абсолютно позиционированный элемент div для хранения подписей. Этот div расположен над изображениями циклического перемещения, но независимо от того, какой z-индекс я даю в качестве заголовка, div скрывает его.

Есть ли способ получить заголовок 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);
}

Ответы [ 2 ]

5 голосов
/ 20 апреля 2014

Я тоже встречался с этой проблемой.

Мое состояние - мои главные выпадающие пункты меню всегда будут покрыты слайдом цикла 2. Мы обычно знаем, что у нас есть выпадающее меню в одном абсолютном блоке. Всякий раз, когда мы нажимаем или наводим курсор мыши, дочерние элементы меню будут появляться и показываться. Но в то же время мы знаем, что они не будут учитываться в плавающем макете и имеют нулевую высоту.

Раньше я пытался установить относительную позицию для контейнерных элементов div, но как только я это сделал, блок слайдов под верхним меню будет сдвигаться вниз при каждом выходе выпадающего дочернего меню. Очевидно, это не то, что я хочу.

После двухчасового цикла обучения я нашел это решение: 

.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. Правда, но, как говорилось ранее, мы должны установить его положение как относительное.

3 голосов
/ 19 июля 2011

Получил ответ здесь: http://forum.jquery.com/topic/displaying-a-div-at-a-z-index-above-a-jquery-cycle-slide-show-18-7-2011

заголовок div находится внутри контейнера слайд-шоу .... как ребенок будет рассматриваться как слайд.для вашего слайдшоу ... расположите относительное, затем поместите подписи внутри него.Цикл будет увеличивать z-индекс слайдов на 1, поэтому будет работать z-индекс как минимум на один больше, чем количество слайдов

...