Displaying a div at a z-index above a jQuery Cycle

Question

I am using the jQuery cycle plugin here: http://www.mitchsflowers.dreamhosters.com/

The slides are in a relatively positioned div and it contains an absolutely positioned div to hold captions. This div is positioned above the cycling images but no matter what z-index I give the caption div the images hide it.

Is there a way to get my caption div above the cycle images?

#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

I met this problem too.

My condition is my top drop-down menu items would always be covered by cycle 2 slide. We know usually we have the drop-down menu in one absolute block. Whenever we click or hover, the child menu items would be coming out and show. But the same time, we know, they would not be counted into the floating layout and has 0 height.

Before, I tried to set a relative position to the container div's, but once I did, the slide block below the top menu would be pushed down whenever the drop-down child menu coming out. Obviously, it's not what I want.

After study cycle 2 few hours, I found this solution:

.cycle-slideshow {
 z-index: 0; // or any smaller value to the covered div's
}

it's pretty simple, actually.

OK, let me share you more about this.

In cycle 2 js, we could find, as default, cycle 2 would initial the main slide item z-index as maxZ: 100

// @see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
    ....
    maxZ:             100,
    ...
}

All other slides would has z-index by -1 increment, like 99, 98, and so on.

You might think, OK, if I set my div z-index as 101 or bigger, it would be on the top of cycle 2 slide. True, but as talked before, we have to set its position as relative.

Answer 2

Got the answer here: http://forum.jquery.com/topic/displaying-a-div-at-a-z-index-above-a-jquery-cycle-slide-show-18-7-2011

captions div is inside slideshow container....as a child will be treated like a slide.

Need an outer wrapper for your slidehsow...position relative, then position captions inside that. Cycle will incremet slides z-index by 1, so a z-index of at least one more than slide count will work