Help with z-index

Posted on 2011-10-12
Last Modified: 2012-05-12

I am trying to get three layers to stack properly. They should look like this (top layer first)

.centered     -     contains a png of a white curved banner

.blue-dropdown     -     contains a blue menu that drops down on hover, this should appear from under the white curved banner

.header-bg     -     a gradient background image, this should appear behind the blue drop down, but now it is appearing above the blue drop down

The problem is that the background layer is appearing above the blue-dropdown layer. even though the z-index are set properly.

Can someone help explain what is happening here and how I can fix it?


Question by:elliottbenzle
    1 Comment
    LVL 16

    Accepted Solution

    Seems fine in Firefox 6/7 and IE 8.  See attached.
    Is this how it should look?


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now