描述：當您向下滾動時，會出現黑色導航欄，但當您進一步向下滾動到輪播時，您會看到導航欄移到其后面。這種情況不僅發生在輪播上，而且發生在我網站上的其他文本、卡片等上。黑色導航欄造成了問題。下面是該問題的演示$('.navTrigger').click(function () {
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <link href="bootstrap-4.0.0/dist/css/bootstrap.min.css" rel="stylesheet" > <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link href="CHECK.css" rel="stylesheet"><script src="CHECK.js"></script></head><body><nav class="nav"> <div class="container"> <div class="logo"> <a href="#">Your Brand</a> </div> <div id="mainListDiv" class="main_list"> <ul class="navlinks"> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> <span class="navTrigger"> <i></i> <i></i> <i></i> </span> </div></nav><section class="home"></section><div style="height: 1000px"> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> </ul>
1 回答
慕仙森
TA貢獻1827條經驗 獲得超8個贊
在您的導航 CSS 中添加此屬性
z-index: 1;
然后它會出現在內容上方
所以你的導航CSS變成
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
text-align: center;
z-index: 1;
}
- 1 回答
- 0 關注
- 113 瀏覽
添加回答
舉報
0/150
提交
取消