HTML 导航栏在幻灯片放映下（不在屏幕上）如何在不粘住或使用 Bootstrap 的情况下将其强制到屏幕底部？

Question

网站上的导航栏出现在 js 幻灯片下方，无法让导航栏出现在页面底部的它前面。我无法使用 css 粘滞项，因为我需要导航栏移动到屏幕顶部并在用户向下滚动时停留在那里。

我试过将幻灯片放映容器设置为相对的并增加导航栏的 z-index 但这没有任何作用。

<header>
        <div class="slideshow-container">
            <div class="mySlides fade">
                <img src="http://placehold.it/1900x1080" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="http://placehold.it/1900x1080" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="http://placehold.it/1900x1080" style="width:100%">
            </div>
        </div>
        <nav class="navbar">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav">
            <div class="dropdown">
                <button class="dropbtn">About</button>
            <div class="dropdown-content">
                <a href="about.html">About us</a>
                <a href="nco-profile.html">NCO Profiles</a>
                <a href="co-profile.html">CO profiles</a>
                </div>
            </div>
                <li class="nav-item">
                <a class="nav-link" href="joinInfo.html">Joining Info</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact.html">Contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="calendar.html">Calendar</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="forms.html">Forms</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="courses.html">Courses</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="courses.html">Support Committee</a>
                </li>
          </ul>
        </div>  
      </div>
    </nav>
  </header>

.navbar {
    overflow: hidden;
    background-color: #083867;
    font-family: Arial;
    display: flex;
    justify-content: center;
    bottom: 0;
}
.slideshow-container {
    position: relative;
    z-index: 1;
}

导航栏应该位于底部幻灯片的顶部，幻灯片运行在背景中，但幻灯片位于导航栏上方。

Answer 1

尝试将位置 fixed、absolute 或 relative 添加到导航栏，然后为其指定一个大于 1 的 z-index。

HTML 导航栏在幻灯片放映下（不在屏幕上）如何在不粘住或使用 Bootstrap 的情况下将其强制到屏幕底部？

HTML Navbar is under slideshow (not on screen) How to force it to bottom of screen without making it sticky or using Bootstrap?

html

javascript

css

nav