Z-index working incorrectly

Question

I'm trying to have #menuContainer "above" #mainOverlay using the z-index property, but it won't work. My code for the two IDs:

menuContainer

#menuContainer{
    width:650px;
    height:50px;
    position:relative;

    z-index:2;

    margin-top:0;
    margin-right:auto;
    margin-bottom:0;
    margin-left:auto;

    background-color:rgba(100, 100, 100, 0.46);
}

mainOverlay

#mainOverlay{
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    z-index:1;

    background-color: rgba(0,0,0,0.3);
}

Alternatively, you could check this JSfiddle out.

Reading similar questions didn't bear any fruits, so that's why I decided to ask a separate question, in case it won't work for other people in the same boat I am in. All help greatly appreciated.

Answer 1

You are not in the same scope so the z-index will have no effect. You need to add the z-index on the same level, i.e to your parent element #mainOverlayWrap in your case. Remember you will also need to have position: relative|absolute|fixed; set for the z-index to have effect.