我有职位重叠的问题。
我有一个包含以下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设置的位置比菜单高。但是菜单仍然可见（未变灰）。
这是该站点的HTM版本，并且已保存，因为我无法在JSFiddle中进行复制
所以我的问题很简单：我该如何解决？（与其余的菜单一样，菜单“通过背景img变成灰色”）。
先感谢您！
编辑1
我已经更新了链接。仍链接到内部CSS的CSS资源。现在您应该看到正确的站点
根据屏幕宽度的不同，您必须调整z索引。目前，您尚未考虑在媒体查询中设置z索引和位置，这就是问题所在。
您需要针对以下情况（以及其他情况取决于屏幕宽度）更改媒体查询：
@media ( min-width:60em )
至
#menu {
left: auto;
bottom: auto;
height: 0;
width: 100%;
position :relative; /*added*/
z-index : -99 /*added*/
}
或者，如果要避免这种情况，请在样式表的末尾定义通用的CSS，因为MQ取决于顺序（仅当它们具有通用属性时）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句