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

菜单栏固定在页面顶部，同时向下滚动。但是，向下滚动时，菜单栏会在其他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。请帮我解决这个问题。

来源

2017-07-12 dsoup2

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

来源

2017-07-12 07:21:16 frnt

谢谢。有用。还有一个问题是菜单栏现在阻塞了容器流体格的顶部。我希望它被放置在菜单栏的正下方。你有没有为容器流体格设置“边缘顶部”的想法？ – dsoup2

欢迎@ dsoup2，没有你必须使用与菜单栏相同值的margin-top，因为它的位置是固定的，所以你需要在div下面使用margin-top。如果有效，请接受。 – frnt

大声笑我不知道如何接受答案，直到我按下复选标记的好奇心。谢谢〜 – dsoup2

看到代码它是完全没问题的。

#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

来源

2017-07-12 07:11:11

如果指定的z-index对于其他的div然后分配heigher的z-index到菜单栏。 –

试试这个。希望你得到了解决

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

来源

2017-07-12 11:08:05

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

回答

相关问题