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

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> 

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

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

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