菜单叠加中导航栏上方的空白答案

【问题标题】：White space above navbar in menu overlay菜单叠加中导航栏上方的空白
【发布时间】：2016-04-11 10:47:50
【问题描述】：

我一直在构建一个从页面顶部下拉的覆盖菜单。我希望导航栏位于覆盖( <div id="myNav" class="overlay"> ) 内，它正在工作，但不幸的是它上面有一个空白，我似乎找不到可以摆脱它的地方，它不会影响网站的其余部分

这里是代码

【问题讨论】：

每个元素都有默认的margin和padding，尽量去掉
你给了top: 4%，这就是.overlay-content中有空格的原因
我试过了，这导致按钮无响应，菜单现在无法打开

【解决方案1】：

.overlay-content {
    position: fixed !important;
    top: 4% !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 1px !important;
}

此 css 用于您的页面，您需要从中删除 top 属性，新 css 将是此

.overlay-content {
    position: fixed !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 1px !important;
}

顶级属性从顶部为您的.overlay-content 提供空间。

【讨论】：

我试过了，这导致按钮无响应，菜单现在无法打开
尝试发布您的代码或创建一个小提琴，因为只有在测试之后才能纠正问题。

【解决方案2】：

只需将 overlay-content 的 top 属性更改为 0

【讨论】：

我试过了，这导致按钮无响应，菜单现在无法打开
也将您的 .overlay z-index 更改为 -1 默认情况下，覆盖在您的标题上方z-index 为 12。每当您调用 .overlay 时，将其 z-index 更改为大于 12 的数字。