位置固定的菜单栏不起作用答案

【问题标题】：Menu bar with position fixed not working位置固定的菜单栏不起作用
【发布时间】：2017-07-12 07:06:42
【问题描述】：

菜单栏在向下滚动时固定在页面顶部。但是，奇怪的是，向下滚动时，菜单栏位于其他 div 下方，因此我无法单击菜单。

#cssmenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #E6E6E4;
}

.row {
  margin: 0 auto;
  width: 100%;
  height: 400px;
}

.col-sm-4 {
  height: 100%;
  border: 1px solid black;
}

<div id='cssmenu'>
  <ul class="menubar">
    <li><a href="#" class="btn btn-sm">Please</a></li>
    <li><a href="#" class="btn btn-sm">Fix</a></li>
    <li><a href="#" class="btn btn-sm">This</a></li>
    <li><a href="#" class="btn btn-sm">Problem</a></li>
  </ul>
</div>
<div class="container-fluid">
  <div class='row'>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
</div>

这是 HTML 代码。

奇怪的是，它与其他不使用这些类（容器流体和行）的 div 配合得很好。请帮我解决这个问题。

【问题讨论】：

标签： css html menubar

【解决方案1】：

将z-index 添加到#cssmenu 以使链接可点击如下，

z-index CSS 属性指定定位元素的 z 顺序及其后代。当元素重叠时，z-order 确定哪个一个覆盖另一个。

#cssmenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #E6E6E4;
  z-index:9;/*Add this*/
}

#cssmenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #E6E6E4;
  z-index: 9;
}

.row {
  margin: 0 auto;
  width: 100%;
  height: 400px;
}

.col-sm-4 {
  height: 100%;
  border: 1px solid black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id='cssmenu'>
  <ul class="menubar">
    <li><a href="#" class="btn btn-sm">Please</a></li>
    <li><a href="#" class="btn btn-sm">Fix</a></li>
    <li><a href="#" class="btn btn-sm">This</a></li>
    <li><a href="#" class="btn btn-sm">Problem</a></li>
  </ul>
</div>
<div class="container-fluid">
  <div class='row'>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
</div>

【讨论】：

谢谢。有用。另一个问题是菜单栏现在挡住了 container-fluid div 的顶部。我希望它放在菜单栏的正下方。您有没有为容器流体 div 设置“margin-top”的想法？
欢迎@dsoup2，不，你必须使用与菜单栏相同的值的margin-top，因为它的位置是固定的，所以你需要在下面的div中使用margin-top。如果可行，请接受。
大声笑我不知道如何接受答案，直到我出于好奇按下了复选标记。谢谢~

【解决方案2】：

看代码就完全没问题了。

#cssmenu {
position: fixed;
left: 0;
top: 0;
height: 40px;
width: 100%;
background-color: #E6E6E4;
}

#cssmenu ul li{
  display: inline;
  margin-right: 20px;
}

.row{
margin:0 auto;
width: 100%;
height: 400px;
}
.col-sm-4{
height: 100%;
border: 1px solid black;
}

<div id='cssmenu'>
        <ul class = "menubar">
            <li><a href = "#" class = "btn btn-sm">Please</a></li>
            <li><a href = "#" class = "btn btn-sm">Fix</a></li>
            <li><a href = "#" class = "btn btn-sm">This</a></li>
            <li><a href = "#" class = "btn btn-sm">Problem</a></li>
        </ul>
    </div>
    <div class="container-fluid">
     <div class = 'row'>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
     </div>
    </div>

Codepen：https://codepen.io/Omi236/pen/gRZYQZ?editors=1100

【讨论】：

如果您为其他 div 指定了 z-index，则将更高的 z-index 分配给菜单栏。

【解决方案3】：

试试这个。希望你得到解决方案

#cssmenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #E6E6E4;
}
.menubar{float:left;padding:0;margin:0;}
.menubar li{display:inline-block;float:left;}
.menubar li a{padding:10px;text-decoration:none;display:block;}

.row {
  margin: 0 auto;
  width: 100%;
  height: 400px;
}

.col-sm-4 {
  height: 100%;
  border: 1px solid black;
}

<div id='cssmenu'>
  <ul class="menubar">
    <li><a href="#" class="btn btn-sm">Please</a></li>
    <li><a href="#" class="btn btn-sm">Fix</a></li>
    <li><a href="#" class="btn btn-sm">This</a></li>
    <li><a href="#" class="btn btn-sm">Problem</a></li>
  </ul>
</div>
<div class="container-fluid">
  <div class='row'>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
</div>

【讨论】：