position relative overlapping position fixed

Question

I have an position overlap problem.

I've got an menu with the following css:

position: relative;
z-index: 1;
top: 1em;
left: 120px;
margin-top: 0;
display: inline-table;
font-size: 0.875em;

And an overlay ( with some options ) with this css:

width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: url('../img/overlay.png') repeat 0 0;
text-align: center;

As you can see is the z-index is set way higher then the menu. But the menu is still visible ( not grayed out ).

Here's and saved HTM version of the site because i couldn't replicate in JSFiddle

So my question is very simple: How can I fix this? ( that the menu is "grayed out, by the background img ) just like the rest....)

Thank you in advance!

EDIT 1

I've updated the link. The css resources where still linked to the intern CSS. Now you should see the right site

Answer 1

Depending on your screen width, you'll have to adjust the z-indexes.Presently, you have not considered setting z-index and position in your media queries, thats why you are getting the issue..

you need to alter your media query for below case (and others depending on your screen width):

@media ( min-width:60em )

to

#menu {
    left: auto;
    bottom: auto;
    height: 0;
    width: 100%;
    position :relative; /*added*/
    z-index : -99 /*added*/
}

OR if you want to avoid this, define the common css at the end of the style-sheet as MQ's depend on the order (only if they have common attribute)