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

Possible z-index issues causing slider transition bug

  • # May 10, 2012 at 9:45 pm

    I am having some trouble that I assume is being caused by z-index, but not sure how to correct it. First let me explain the reason it is coded the way it is. I have two absolutely positioned elements so that I can send the navigation behind the slider background image (something I can’t do if I apply the background image to the actual slider div).

    As a result the first image of the slider is completely hidden and the image transitions only transition into themselves and not out of the previous image…if that makes sense.

    I have my developer site at for you to see what is happening.

    I am using the nivo slider and unfortunately did not get a lot of help from their support forum so I brought it to the community that has always helped in the past.

    # May 10, 2012 at 9:52 pm

    Works fine for me in Chrome.

    # May 10, 2012 at 10:03 pm

    hmmm that is weird. It does it for me in every browser on both my OS X machine at home and my Windows machine at work.

    The slider “works” just fine, but the transitions should transition from one image to another and not from white to an image. Here is an example of it working correctly – Maybe this will help better explain the difference.

    # May 10, 2012 at 10:13 pm

    Right, so obvious now, can’t believe I missed it!

    I’m not sure I understand why you need that second element?

    # May 14, 2012 at 9:30 pm

    Without the second element I cannot get the slider nav behind the shadow of the slider background.

    # May 14, 2012 at 10:17 pm

    Simplest solution would be to remove the white from the sprite. Use a transparent PNG and your problem is solved.

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

You must be logged in to reply to this topic.