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>

还有自助旋转木马

<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-index或提高navbar的z-index来修复它们。

关于javascript - 我的自举轮播指标与固定的顶部导航栏重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40989370/