描述：当您向下滚动时，会出现黑色导航栏，但当您进一步向下滚动到轮播时，您会看到导航栏移到其后面。这种情况不仅发生在轮播上，而且发生在我网站上的其他文本、卡片等上。黑色导航栏造成了问题。下面是该问题的演示$('.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条经验 获得超7个赞
在您的导航 CSS 中添加此属性
z-index: 1;
然后它会出现在内容上方
所以你的导航CSS变成
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
text-align: center;
z-index: 1;
}
- 1 回答
- 0 关注
- 54 浏览
添加回答
举报
0/150
提交
取消