Treehouse: Grow your CSS skills. Land your dream job.

z-index question i.c.w. lavalamp menu

  • # November 23, 2012 at 5:30 am

    Hi there,

    I try to make my lavalamp menu work like this:

    but then to have the container bg in the middle like this

    as you can see in the second example the border from the menu disappeared and is now hidden in between the body and the container bg. Does anybody know how I can fix this?
    If I change the #nav li.back to a positive z-index the submenu is not working anymore….

    Thanks so much in advance!!!!!!


    # November 23, 2012 at 5:52 am

    I don’t know how the lavalamp works but I created a version that should be easy to set up

    # November 23, 2012 at 5:57 am

    I assume this is due to all the absolute positioning of the container.

    I don’t know if all this is a requirement of the effect but that’s the issue AFAICT.

    # November 23, 2012 at 6:21 am

    hi JoniGiuro & Paulie_D,
    Thanks for your comments!
    @JoniGiuro I like the example but what I miss is that it’s not visible what the ‘active’ menu button is. In my example the home is now active, if you stop hovering over the other menu items, go below the nav, the button style will fly back to the active button, in my case “home”…

    @Paulie_D yes it’s due to the absolute positioning but how will I get the container to not be absolute, like in example link 2, and still have the nav functioning on top like it does in example link 1. …

    # November 23, 2012 at 6:42 am

    My question, I suppose, is..

    “Is the absolute positioning fundamental to the ‘lavalamp’ effect?”

    # November 23, 2012 at 6:51 am

    Oh, I’m sorry :)
    well, not fundamental for lavalamp. In example link 2 ( , where there is no absolute positioning of the container, the lavalamp works fine, only it’s moving behind the container bg so we won’t see it now.
    If I leave out the container div altogether, it works perfectly :) But I like the bg image to be in the middle, moving with the content.

    the “#nav li.back” has a negative z-index, I tried changing the #nav li.back z-index of -1 to a positive number or static, but it will cause the submenu to disappear as soon as you hover over it…
    I don’t really understand why though..

    # November 23, 2012 at 7:15 am

    Well, I guess, the first thing to do is fix the effect so change the z-index of

    #nav li.back

    to 1.

    My guess is that the .back (or however this is achieved) is sitting on top of the hovered element and so the hover comes off.


    # November 23, 2012 at 7:19 am


    #nav li.back


    pointer-events: none;

    # November 23, 2012 at 7:28 am

    WOW, great it works! :)))

    # November 23, 2012 at 7:31 am

    Thank you @Paulie_D

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.