css - 位置相对重叠位置固定

Question

我有位置重叠问题。

我有一个带有以下 CSS 的菜单:

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

以及带有此 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;

如您所见，z-index 设置得比菜单高很多。但菜单仍然可见(未变灰)。

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

所以我的问题很简单:我该如何解决这个问题？ (菜单是“灰色的，被背景 img 变灰了)就像其他的一样....)

提前致谢!

编辑 1

我已经更新了链接。仍然链接到实习生 CSS 的 css 资源。现在您应该看到正确的站点

Answer 1

根据您的屏幕宽度，您必须调整 z-index。目前，您还没有考虑在媒体查询中设置 z-index 和位置，这就是您遇到问题的原因。

您需要针对以下情况更改您的媒体查询(和其他取决于您的屏幕宽度):

@media ( min-width:60em )

到

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

或者，如果您想避免这种情况，请在样式表末尾定义通用 CSS，因为 MQ 取决于顺序(仅当它们具有通用属性时)