Fixed positional position
I have a problem with overlapping position.
I have a 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, it is z-index
set higher than the menu. But the menu is still visible (not grayed out).
This is where the HTM version of the site is saved, because I couldn't replicate to the JSFiddle
So my question is very simple: how can I fix this? (that the menu is "greyed out, in the background img) like everything else ...)
Thank you in advance!
EDIT 1
I have updated the link. CSS resources that are still related to CSS intern. You should now see the correct site
source to share
Depending on the width of the screen, you will need to adjust the z-indexes. You have not currently considered setting z-index and position in your media queries, which is why you are getting the problem.
you need to change media query for below case (and others depending on 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 shared css at the end of the stylesheet as MQ is order dependent (only if they have a shared attribute)
source to share