Javascript 我的引导转盘指示器与固定顶部导航栏重叠

我正在创建一个带有引导转盘和w3.css固定顶部导航栏的页面。然后，当我向下滚动页面时，旋转木马的指示器突然与顶部导航重叠

这是当前问题的图片，带有红色箭头

这是我的顶部导航栏的代码

<script>

window.onscroll = function() {scrollFunc()};
function scrollFunc() {
    if (document.body.scrollTop > 130 || document.documentElement.scrollTop > 130) {
    document.getElementById("myTop").classList.add("w3-cyan","w3-card-4");
    document.getElementById("myIntro").classList.add("w3-show-inline-block");
} else {
    document.getElementById("myIntro").classList.remove("w3-show-inline-block");
    document.getElementById("myTop").classList.remove("w3-cyan","w3-card-4");
   }
}
</script>

<div id="myTop" class="w3-top w3-container w3-padding-2 w3-theme w3-large">
  <!-- <i class="w3-opennav w3-hide-large w3-xlarge w3-margin-left w3-margin-right" onclick="w3_open()"></i> -->
  <span id="myIntro" class="w3-hide">
  <a href="index.php">
<img src="admin/img/fcuautonomous.png" width="200px" height="50">
  </a>
  </span>
</div>

<header class="w3-container w3-theme w3-padding-18 w3-blue">
  <h1 class="w3-xxxlarge w3-padding-16">
   <a href="index.php">
    <img src="admin/img/fcuautonomous.png" width="400px">
   </a>
  </h1>
</header>

<nav class="w3-card-4 w3-indigo">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>                       
      </button>
      <a class="navbar-brand" href="index.php"><b>Alumni Tracer System</b></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.php">Home</a></li>
        <li><a href="alumnireg.php">Alumni Registration</a></li>
        <li><a href="#tour">News and Events</a></li>
        <li><a href="#contact">Job Oppurtunities</a></li>
        <li><a href="#contact">Job Oppurtunities</a></li>
        <li><a href="#contact">Featured Alumni</a></li>
        <li><a href="#contact">Photo Gallery</a></li>

      </ul>
    </div>
  </div>
</nav>

window.onscroll=function（）{scrollFunc（）}；
函数scrollFunc（）{
if（document.body.scrollTop>130 | | document.documentElement.scrollTop>130）{
document.getElementById（“myTop”）.classList.add（“w3-cyan”、“w3-card-4”）；
document.getElementById（“myIntro”）.classList.add（“w3显示内联块”）；
}否则{
document.getElementById（“myIntro”）.classList.remove（“w3显示内联块”）；
document.getElementById（“myTop”）.classList.remove（“w3-cyan”、“w3-card-4”）；
}
}

和引导转盘

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
  <li data-target="#myCarousel" data-slide-to="4"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="admin/img/SLIDER1.jpg" alt="Chania">
  </div>

  <div class="item">
    <img src="admin/img/SLIDER2.jpg" alt="Chania">
  </div>

  <div class="item">
    <img src="admin/img/SLIDER3.jpg" alt="Flower">
  </div>

  <div class="item">
    <img src="admin/img/SLIDER4.jpg" alt="Flower">
  </div>

  <div class="item">
    <img src="admin/img/SLIDER5.jpg" alt="Flower">
  </div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

</div>

这是由于转盘指示器的z指数较高

---

您可以通过为导航栏提供较低的z索引或较高的z索引来进行修复

将navbar的z-index属性值增加到21

也共享w3.csw你是什么意思？我最上面的导航栏是w3.cssI，意思是w3.css中的css代码。如果我把它放在这里，它是纯代码的，它会很长。你能帮我弄一下吗？这比逐行检查代码更容易理解您的问题。我将把它放在哪里？只需将.w3-card-4.w3 indigo{z-index:99999；}放在css文件的底部即可。会有用的，谢谢你，先生。非常有帮助。！我已将以下代码：

.w3-card-4.w3-cyan{z-index:99999；}

放入topnav文件，然后它就可以工作了。请务必了解z-index。对谢谢。：）