javascript - 如何将固定导航栏保持在页面元素的前面而不是后面

Question

所以我正在构建我的第一个个人网站，我的主页上有一个自动播放的演示文稿(我总共有 5 个页面，但我才刚刚开始做这个)。我最近完成了顶部导航栏的制作，并使用 table 标签将其隔开、颜色等。

然后我去尝试在下面进行演示。我完成了它，当我滚动时，我看到我的导航栏在我的演示文稿后面，侧面的两个栏填充它所以它有 100% 的宽度，当我滚动到演示文稿后，导航栏恢复了文本顶部。

导航栏是固定的，幻灯片和侧面颜色是绝对的。我不知道如何做到这一点，所以无论我滚动多远，我的导航栏总是会显示并位于页面顶部。

我无法发布我的 html 和 css 代码，因为这篇文章的格式很明显，所以我只使用了一些在线文本主机: Link

我将尝试发布 HTML 代码:

<!-- Here is where the top nav starts -->
<table bgcolor="#C6D9FA" style="width:100%;position:fixed;top:0%;">
<tr>
    <td><a href="Homepage.html"><div id="topnavlinks">Homepage</div></a> 
</td>
    <td><a href="AboutMe.html"><div id="topnavlinks">About Me</div></a> 
</td>
    <td><a href="Portfolio.html"><div id="topnavlinks">Portfolio</div></a> 
</td>
    <td><a href="Extracurriculars.html"><div 
id="topnavlinks">Extracurriculars</div></a></td>
    <td><a href="Contact Me.html"><div id="topnavlinks">Contact Me</div> 
</a> 
</td>
</tr>
</table>
<!-- Here is where the top nav ends -->

<div id="section1background">
<!-- Here is where the autoplaying slideshow starts -->
<div class="slideshow-container">
<div class="mySlides fade"><img src="TrackRun1.jpg" style="width:100%"> 
</div>
<div class="mySlides fade"><img src="Graduation1.jpg" style="width:100%"> 
</div>
<div class="mySlides fade"><img src="HasHeightSmile.jpg" 
style="width:100%"> 
</div>
<div class="mySlides fade"><img src="Lazar.jpg" style="width:100%"></div>
<div class="mySlides fade"><img src="MirrorWarp.jpg" style="width:100%"> 
</div>
<div class="mySlides fade"><img src="SpringTrack2017.jpg" 
style="width:100%"></div>
<div class="mySlides fade"><img src="TrackDinner2018-1.jpg" 
style="width:100%"></div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

这是 CSS 的代码:

#Title{font-family:Open Sans, sans-serif;
font-size:54px;
color:blue;}

#Text{font-family:Carter One, cursive;
font-size:40px;
color:black;
margin-top:5%;
}

a{text-decoration:none;
font-family:Carter One, cursive;

color:black}

html, body {
margin:0;
padding:0;
}

a:hover { 
  text-decoration:underline;
}

#topnavlinks{font-size:40px;}

/* HEADER COMPLETE */

/* SECTION 1: AUTO-PLAY SLIDESHOW */

* {box-sizing:border-box}

.slideshow-container {
  max-width: 100%;
  position: absolute;
  margin: auto;
  left:25%;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

 #section1background {
      background-color: grey;
      height: 74.3%;
      position: absolute;
      top: 6.9%;
      left: 0;
      width: 100%;
    }

Answer 1

您需要使用 z-index 始终将其置于顶部 使用 CSS

table{
 Width: 100%;
 height: 50px;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
}