我的自举轮播指标与固定的顶部导航栏重叠

Question

I am creating a page with a bootstrap carousel and w3.css fixed top navigation bar. Then suddenly when I scroll down the page the indicators of the carousel is overlapping my top navigation.

Here is the picture of the current problem with a red arrow

Here is my code for my top navigation bar

<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>

and for the Bootstrap carousel

<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>

Answer 1

It is due to higher z-index of carousel indicators.

You can fix by either giving them lower z-index or by giving the navbar a higher z-index.

Answer 2

将导航栏的z-index属性值增加到21