Javascript and layers

[SurfPark]

I have a problem with my javascript pop-out menu and a slideshow I have running. The menu, when expanded, shows up under the slideshow. Is there a way you can make some javascripts show above another on the same page?

[tZ]

function bringToFront(element) {
element.style.position = 'relative';
element.style.zindex = 1000;
}

bringToFront(slideShowElement);

[SurfPark]

I'm a little bit confused as to where I should place this? I know the elements both have the script tag stuff in the header and then the HTML. I want the menu to show above the slideshow.

[DesignVHL]

It looks like it goes into your CSS style sheet.

[jScott_harris]

make sure the html the javascript is outputting has either an id or class attribute and then you can do something like this in your css:

#menu{
z-index: 1001;
}
#slideshow{
z-index: 1000;
}

then you would want the html output to look something like this:

<div id="menu">Menu Here</div>

<div id="slideshow">Slideshow here</div>

[jScott_harris]

oh, I just wanted to add, things like flash will conflict with the z-index you assign, so watch out for that.

[tZ]

the zindex property only applies to elements with a absolute or relative positioning context. So you will need place one of those positioning contexts onto the element(s) your using zindex with.