菜单栏位置固定不起作用

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是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>

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

Answer 2

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

  

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

#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

试试这个。希望你有解决方案

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;