html - 为什么我的带有 javascript 的项目会出现在我的 Nav 前面

Question

我的导航一直落后于我拥有的任何包含 javascript 的项目。我已经尝试更改这两个项目的 z-index，但我不确定如何修复它

http://flavorsbyj.site/#Reviews

查看此站点并向下滚动...如果您使用图片幻灯片向上滚动一点，也会发生这种情况。两者都包含 Javascript

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  setTimeout(showSlides, 5000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container col-6 col-m-12" style="background-color:#E7E7E7; border-radius: 1vh;">
  <div class="mySlides fade">
    <img alt="Event2" src="Images/E2.1.jpg" style=" border-radius: 1vh;" class="col-20 col-m-0">
    <img alt="Event2" src="Images/E2.1.jpg" style=" border-radius: 1vh;" class="col-0 col-m-20">
  </div>



  <div class="row" id="navbar" style="position: fixed; width: 100%;">
    <div class="col-m-4 col-4 dropdown-right">
      <span id="bar" style="font-size:9vh;cursor:pointer; color: #232323; margin-left: 10px; padding: 10px; text-shadow: 1px 2px white" onclick="openNav()">&#9776;</span>
    </div>
    <div class="col-5 col-m-4">&nbsp;</div>
    <div class="col-4 col-m-4"><img alt="Logo" src="Images/Logo.jpg" class="col-9 col-m-20" style="height: 13vh;"></div>
    <div class="col-2 col-m-0">&nbsp;</div>
    <div class="col-m-0 col-5">
      <a href="Home.html" style=" text-align: right; margin-top: -1vh;">
        <img alt="RampCert" src="Images/Ramp.png" class="col-20 col-m-20" style="height: 10vh;">
      </a>
    </div>
    <div class="col-m-7 col-0">
      <a href="#Home" style="text-align: right; margin-top: -1vh;">
        <img alt="RampCert" src="Images/Ramp.png" class="col-20 col-m-20" style="height: 10vh;">
      </a>
    </div>
  </div>

标签： htmlcss

Answer 1

您只需要添加一个z-index到您的#navbar然后它将是您的内容的前面。

例子：

#navbar {
  z-index: 999 //or any value bigger than 0
}