网站菜单隐藏在页面后面 - Z-index答案

【问题标题】：Website menu is hidden behind page - Z-index网站菜单隐藏在页面后面 - Z-index
【发布时间】：2017-04-22 11:11:23
【问题描述】：

我正在处理的网站存在问题，因为菜单仅显示主页上的第一个子项（覆盖在 metaslider 顶部），但菜单在其余页面上正确显示。我尝试过操作菜单的 z-index、滑块和页面内容，但无济于事。

我发现当包含 div 的网站内容的 z-index 为 100 时（就像现在一样）：

.site-content-contain {
    z-index: 100!important;
}

网站内容显示，但菜单有问题。只要它的值是 99 或更低，我就可以正确访问菜单，但是站点容器就会出现问题。

其他相关信息是正在使用的主题是 TwentySeventeen 的自定义子主题。

【问题讨论】：

请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源来理解的问题变得毫无用处。创建一个minimal reproducible example 并将其放在问题本身中。

【解决方案1】：

CSS

#masthead {
    z-index: 999;
    background-color: red !important; /*You need to use gradient color here */
}

【讨论】：

【解决方案2】：

如果您从标题 (.site-header) 和站点容器 (.site-content-contain) 中删除 z-index，我会让您的菜单正常工作：

但它不是真的可读（白色/白色），也许你可以添加边框或框阴影

【讨论】：