我有位置重叠问题。
我有一个带有以下 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-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 取决于顺序(仅当它们具有通用属性时)
关于css - 位置相对重叠位置固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25238163/