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

Question

向下滚动时，菜单栏固定在页面顶部。但是，奇怪的是，向下滚动时，菜单栏位于其他 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 配合得很好。请帮我解决这个问题。

Answer 1

看代码完全没问题

#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>

代码笔：https://codepen.io/Omi236/pen/gRZYQZ?editors=1100

Answer 2

将 z-index 添加到 #cssmenu 以使 link 可点击，如下所示，

The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other.

#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>

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

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

Menu bar with position fixed not working

html

css

menubar