The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Javascript DropDown Menu and Slideshow z-index inconsistency

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #31225

    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

    {float:left; width:930px; height:45px; text-align:center; background-image: url(; 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

    {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.




    Welcome to the forums :)

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


    Thanks Jamy_za

    That seems to have it sorted.




    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:
    z-index property:

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.