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

2019年8月4日 120次阅读

我有一个位置重叠问题.

我有一个带有以下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资源.现在你应该看到正确的网站

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

您需要更改以下情况下的媒体查询(以及其他视情况,具体取决于您的屏幕宽度)：

@media ( min-width:60em )

至

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

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

点赞