保持固定菜单栏不重叠答案

【问题标题】：Keep Fixed Menu-bar from overlapping保持固定菜单栏不重叠
【发布时间】：2014-11-03 21:24:36
【问题描述】：

大家！

我或多或少是在设计一种原型网站。就像其他网站一样，我试图有一个固定位置的菜单栏，但不会与我放在屏幕上的所有其他内容重叠。因此，从本质上讲，我希望在另一个位于页脚的框（网页正文）之上有一个 100% 宽的框（菜单栏）。

我的代码如下所示：

 <header>
   <nav>
     <ul>
       <a href="#"><li>Name</li></a>
       ...More list elements...
     </ul>
   </nav>
 </header>

 header{
   background-color:white;
   width:100%;
   padding:15px;
   border-bottom:1px solid black;
   position:fixed;
   margin-top:-25px;

 nav ul li{
   list-style-type:none;
   display:inline-block;
   padding:10px;
   margin-right:100px;
   font-family:Script MT, /*To make sure the font is displayable for you*/ Arial;
   font-size:20px;

只要我在文档的其余部分有任何内容（我已将菜单栏放在标签和标签中），菜单栏就会与它重叠，因此它不可见。

所以问题是：我到底如何让我的菜单栏保持固定但不与其他所有内容重叠？

【问题讨论】：

标签： html css menubar

【解决方案1】：

你需要将内容偏移你的标题的高度，这意味着你需要给它一个固定的高度：

HTML：

<header>
  ...
</header>

<div class="content">
</div>

CSS：

header{
  ...
  height:50px;
}

.content{
  margin-top:50px    
}

【讨论】：

【解决方案2】：

尝试使用z-index 并将其设置为 ex。 9999:

header {
   background-color:white;
   width:100%;
   padding:15px;
   border-bottom:1px solid black;
   position:fixed;
   margin-top:-25px;
   z-index: 9999;
}

这会将标题放在所有其他元素的前面，除非它们具有更高的 z-index 编号。

【讨论】：

我试过了，但是内容与标题重叠。再说一次，不是我想要的。
你能试着用你所有的代码做一个小提琴吗？使它更容易使用:)

【解决方案3】：

如果我理解您的要求，请将padding-top 放在等于菜单栏高度的body 标记上。这样，当您位于页面顶部时，浮动菜单不会与任何内容重叠。

【讨论】：

对我来说，当我这样做时，它会将整个菜单栏向下推。