Html 引导导航的Css页脚问题

我正在用bootstrap重新创建我的布局，因为我希望我的网站能够响应。 我现在有这样的布局：

<div id="container">
    <div id="header">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
</div>

但是我遇到了一个问题（您可以看到当前的代码+正确的设置）： 一旦我调整页面大小，使页脚正好位于页眉下方（它位于内容区文本的顶部，我需要在其中添加正确的填充）。之后，单击菜单图标（在移动视图中），页脚位于菜单顶部，这并不意味着如此

就这样,

应该发生的是菜单在页脚上方

我试着用z-指数-20来修正它；但是我不能再点击页脚上的链接了。。。所以这个解决方案行不通

您能帮我吗？

对于

div#footer

footer，请给出

z-index=-1

，您将得到如下方法来解决此问题：

最好在单独的容器中使用（页眉、内容、页脚）

在style.css文件的第（42）行中，您的代码应该如下所示：

更新

新代码并至少将页脚放在一个单独的容器中

    div#footer {
       bottom: 0;
       background: #000000;
       margin-left: auto;
       margin-right: auto;
    }

希望这能对你有所帮助。

回答：MichaB

---

解决方案是增加z指数：1；到导航栏。这解决了问题。

您应该将z索引添加到导航栏，如下所示：

.navbar {
  ...
  z-index: 1;
}

---

如果使用z索引，则必须定位元素。因此，尝试添加位置：相对；z指数为1；到你的#头。这应该可以解决您的问题。您可能还需要使用最小高度，并且可能需要为不同的分辨率使用不同的页脚内容，就像您对顶部所做的那样-menu@MichaB你能再详细解释一下吗？@Patrick我稍后会这么做，但这必须先解决。对不起，我没有检查你的代码是否正确。只需添加z指数：1；到。导航栏，它应该可以工作。不要考虑页脚，您希望导航位于顶层，因此请在页脚中添加z索引。但是，这样我就无法单击页脚中的任何链接（或其中的文本）@Marc y用户想打开导航栏并单击页脚中的某个内容？如果页脚有z-index:-1，即使导航栏没有打开，也不能单击任何内容。就像@MichaB所说的那样。@Marc检查导航栏是否打开如果打开，则使z-index=-1，否则使z-index=0；如果我这样做，来自页脚的文本仍将位于菜单顶部。此外，页脚不再位于页面底部。

.navbar {
  ...
  z-index: 1;
}