Question

大家好！

我或多或少都在设计一种原型网站。就像其他网站一样，我正在尝试使用固定位置的菜单栏，但不会与我放在屏幕上的其他内容重叠。所以，从本质上讲，我希望在另一个盒子（网页主体）的顶部有一个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;

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

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

Answer 1

您需要根据标题的高度来偏移内容，这意味着您需要为其提供固定的高度：

<强> HTML：

<header>
  ...
</header>

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

<强> CSS：

header{
  ...
  height:50px;
}

.content{
  margin-top:50px    
}

Answer 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数。

Answer 3

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

保持固定菜单栏不重叠

3 个答案: