导航栏移动到我的文本、动画、卡片等后面
描述：当您向下滚动时，会出现黑色导航栏，但当您进一步向下滚动到轮播时，您会看到导航栏移到其后面。这种情况不仅发生在轮播上，而且发生在我网站上的其他文本、卡片等上。黑色导航栏造成了问题。下面是该问题的演示
$('.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回答
-
慕仙森
在您的导航 CSS 中添加此属性z-index: 1;然后它会出现在内容上方所以你的导航CSS变成.nav { width: 100%; height: 65px; position: fixed; line-height: 65px; text-align: center; z-index: 1;}
随时随地看视频慕课网APP
相关分类
Html5