位置相对重叠位置固定

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设置的方式比菜单高。但是菜单仍然可见（未变灰）。

所以我的问题很简单：我该如何解决？（菜单“与背景img一起显示为灰色”，就像其他菜单一样...。）

先感谢您！

编辑1

我已经更新了链接。仍链接到内部CSS的CSS资源。现在您应该看到正确的站点

Answer 1

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

您需要针对以下情况更改媒体查询（以及其他情况，具体取决于您的屏幕宽度）：

@media ( min-width:60em )

到

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

或者，如果您想避免这种情况，请在样式表末尾定义公共 css，因为 MQ 取决于顺序（仅当它们具有公共属性时）