Setting z-order of image slideshow in "Carousel II" script

[LCharlier]

1) Script Title: Carousel Slideshow II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/carousel2.htm

3) Describe problem: While I have successfully integrated the Carousel II image slideshow script into a web site, I have been unable to make, what I thought, would be a minor change/enhancement. Let me explain...

Surrounding the script with imagery I designed, I have attempted to turn the
slideshow into a literal "carousel". For my wife's horse-related web site, I have surrounded both the top and bottom of the slideshow with graphics depicting a carnival carousel. That part works quite well but in order to make it look even more realistic, I want to set the zIndex (or z-index) in the Carousel II script to the background (e.g. '1') so that I might superimpose fillagreed ornamentation hanging from the top of the structure over the top edge of the displayed images. Unfortunately, all attempts on my part to modify the JavaScript code to do this seem to do nothing.

Question:
Is it possible to have the animated carousel imagery rotate behind overlapping
elements such as a div or img?

Thanks in advance for any-and-all assistance.

[jscheuer1]

Yes, but you need to understand how z-index stacking works in conjunction with position.

Various browsers will make exceptions under some circumstances. However, the general rule is that the item you are stacking and the item you are stacking over must both have either relative or absolute position. You can mix and match, but each must have at least one of these.

Now everything in the slideshow that you can see already has position absolute, and the default z-index, which is 0. So all you need to stack on top of it is another element or elements with either absolute or relative positioning and a z-index greater than 0. Just to be safe, I always suggest starting with a z-index of 10000 for the top element. This can usually be lowered to 1 later, as long as whatever it is covering has z-index 0.

One other thing to remember is that z-index is inherited for positioned elements. So, if you have a parent element with either absolute or relative position, none of its children, no matter how they are z-indexed can have an effective z-index (in relation to neighbors - siblings or higher - of the parent) higher than that of the parent.