Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How do I correctly control stacking ordered of my divs using z-index?

How do I correctly control stacking ordered of my divs using z-index?

Problem

I have a drop down menu (#dropDownMenu) which appears when the "#headerNav" of my website is hovered over. It works properly if I position the #dropDownMenu (originally hidden with display:none until link is hovered over) slightly over the #headerNav div.

This stops the slight flickering that is caused if the cursor isn't moved over fast enough to the drop down menu when it appears. By slightly overlapping #dropDownMenu over #headerNav this makes it seem like the #headerNav is still being hovered over when cursor is actually in the #dropDownMenu.

Anyway I now want to hide the overlapping part of #dropDownMenu behind header or #headerContent so everything looks neater and so the drop down menu actually looks like it's appearing beneath the #headerNav.

I've tried different z-index settings and none seem to work which is quite annoying. When I set the z-index of #headerNav:hover #dropDownMenu to -1 it is hidden behind all content as expected.

If I set z-index of header or #headerContent to a number higher than "#headerNav:hover #dropDownMenu" then hover over #headerNav there is no difference. I can still see #dropDownMenu overlapping.

CSS:

header {

    position:fixed; 
    top:0;
    right:0;
    left:0;
    height: 40px;
    z-index:20;
    }

    #headerContent {
    background-color: $main-background-color;
    width: $site-width;
    margin:0px auto 0px auto;
    height:40px;

    }

    #headerNav {
    float:right;
    height:37px;
    width:auto;
    margin-top:1px;
    background-color:#464646;
    color:#cccccc;
    }

    #headerNav:hover {
    background-color:#626262;
    cursor:pointer;
    color: white;
    }

    #headerNav:hover #dropDownMenu {
    position:absolute;
    background-color:white;
    border:1px solid gray;
    top:35px;
    right:-39px;
    height:300px;
    width:200px;
    font-weight:bold;
    color:gray;
    display:block !important;
    z-index:1;
    }

    ul li { 
    float:right;
    }

    #photoThumbnail img {
    height:28px;
    width:31px;
    padding-top:5px;
    padding-right:8px;
    -moz-border-radius: 1px 12px 1px 12px;
    border-radius: 1px 12px 1px 12px;

    }

    #currentUser {
    position:relative;
    padding-top:12px;
    padding-left:12px;
    padding-right:6px;
    }


    #siteNavigation {
    display:none;

    }

HTML

Examples and corrections will be greatly appreciated.

Kind regards

Problem courtesy of: LondonGuy

Solution

If your z-index setting is being ignored you might need to add position property, set it to relative or whatever it needs to be. I'm pretty sure z-index is ignored if position property is not set.

Solution courtesy of: Yevgeniy

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How do I correctly control stacking ordered of my divs using z-index?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×