固定位置的菜單欄不起作用

菜單欄固定在頁面頂部，同時向下滾動。但是，向下滾動時，菜單欄會在其他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

固定位置的菜單欄不起作用

回答

相關問題