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设置得比菜单更高。但菜单仍然可见（不显示灰色）。

所以我的问题很简单：我该如何解决这个问题？（菜单是＆＃34;灰色，背景img）就像其余的一样....）

提前谢谢！

编辑1

我已更新链接。仍然链接到实习CSS的css资源。现在你应该看到正确的网站

Answer 1

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

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

@media ( min-width:60em )

到

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

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