Как сохранить фиксированную панель навигации спереди, а не за элементами страницы

Question

Итак, я создаю свой первый персональный веб-сайт, и у меня есть презентация с автоматическим воспроизведением на моей домашней странице (у меня всего 5 страниц, но я только начал над этим работать).Я недавно закончил создание панели навигации вверху и использовал табличный тег для ее разметки, цвета и т. Д.

Затем я попытался сделать презентацию внизу.Я закончил его, и когда я прокрутил, я увидел, что моя навигационная панель была позади моей презентации и две полосы на стороне заполняли ее, чтобы она имела ширину 100%, и после того, как я прокрутил презентацию, навигационная панель вернулась к включению.начало текста.

Панель навигации фиксирована, а слайд-шоу и боковые цвета являются абсолютными.Я понятия не имею, как это сделать, чтобы моя навигационная панель всегда отображалась и находилась в верхней части страницы, независимо от того, как далеко я прокрутил.

Я не смог опубликовать код из моего HTMLи css, потому что форматирование этого поста, по-видимому, поэтому я просто использовал некоторый текстовый хост в Интернете: Ссылка

Я постараюсь опубликовать код для 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;
}