Help with z-index

Posted on 2011-10-11
Last Modified: 2012-05-12
I have a sliding element on my page, that I want to slide down from under another element.

On the above page the blue box should be under the white element and the logo. I set z-index on both items, but it seems to have no effect.

Can someone tell me what I'm doing wrong?

Question by:elliottbenzle
    LVL 2

    Accepted Solution

    Try making the z-index on .blue-dropdown a negative number.  I set it to -1 and it looks great.  You'll probably want to make the top of your .top-menu item a bit higher, too.  But I'm sure you'll see that once you get the z-index worked out.
    @charset "utf-8";
    body {
        background-color: #d9e0e6;
        padding: 0;
        margin: 0;
    .centered {
        margin: 0 auto 0 auto;
        width: 841px;
        height: 125px;
        background-image: url(../images/head-wrap.png);
        z-index: 100;
    .logo {
        float: left;
        height: 60px;
        width: 168px;
        z-index: 200;
        margin-top: 18px;
        margin-left: 30px;
    .top-menu {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #00aeef;
        float: right;
        margin-top: 42px;
        margin-right: 50px;
        font-family: Lato, sans-serif;
        font-size: 12px;
        color: #00aeef;
        height: 18px;
        position: relative;
        top: -125px;
        clip: rect(-100px,auto,auto,auto);
    .blue-dropdown {
        background-image: url(../images/blue-dropdown.png);
        height: 150px;
        width: 820px;
        z-index: -1;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        display: none;
    .top-menu a:link {
        color: #00aeef; 
    .top-menu a:visited {
        color: #00aeef; 
    .top-menu a:hover {
        color: #002d56; 
    .topmenu-item-first {
        float: none;
        display: inline;
        margin-right: 70px;
        margin-left: 10px;
    .topmenu-item {
        float: none;
        display: inline;
        margin-right: 70px;
    .topmenu-item-last {
        padding-left: 0px;
        float: none;
        margin-right: 10px;

    Open in new window

    LVL 4

    Author Closing Comment

    Thanks! that worked

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    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…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

    760 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

    10 Experts available now in Live!

    Get 1:1 Help Now