保持固定菜单栏不重叠

Posted 2023-02-16

【中文标题】保持固定菜单栏不重叠

【英文标题】：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;

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

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

【参考方案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 标记上。这样，当您位于页面顶部时，浮动菜单不会与任何内容重叠。

【讨论】：

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