Javascript DropDown Menu and Slideshow z-index inconsistency

[gavinr]

Hi Chaps

Long time reader first time poster here.

I’m having some issues with a javascipt drop down menu and slideshow.

I have the drop down menu sitting on top of my slideshow using code below, however intermittently the drop menu is falling behing the slide show. When I refresh the browser window the drop down returns on top of the slideshow as desired, however after a while it will fall behind again. Obviously this is not ideal.

The code I have used is as follows:

the drop down menu

.navHeader

{float:left; width:930px; height:45px; text-align:center; background-image: url(http://images.itc-uk.com/websiteimages/classics2010/css/nav-new.jpg); background-repeat: no-repeat; margin: 0px 0 0 0; font-family: Century Gothic, Sans-Serif; padding: 0 0 0 20px; position: relative; z-index: 100;}

the javascript slideshow

.slideshow

{float: left; width: 950px; height: 350px; z-index: 1; margin: 0px 0 0 0}

It has been suggested that it could be a cacheing issue.

Any advice gratefully received.

Thanks

Gavin

[jamygolden]

Welcome to the forums :)

Try add ‘position: relative’ to ‘.slideshow’

[gavinr]

Thanks Jamy_za

That seems to have it sorted.

Cheers

Gavin

[gno]

For people returning to this post for reference and wondering why the magic-one-liner that jamy_za provided works;

The z-index property only effects positioned elements.

You can position an element without moving it out of its place in the normal flow of your html document by adding position: relative – because the relative value means; move the element relative to its current placement. So, if you do not actually move it anywhere – it basicly just enables the z-index property.

Links for reference:
position property: http://www.w3schools.com/Css/pr_class_position.asp
z-index property: http://www.w3schools.com/Css/pr_pos_z-index.asp

[Author]

Posts