Search code examples
jquery-pluginsz-indexcycle

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


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

Solution

  • 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