Как сделать так, чтобы слайд-шоу изображений отображалось под фиксированным заголовком?

Question

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

var slideIndex = 1;

var myTimer;

var slideshowContainer;

window.addEventListener("load",function() {
    showSlides(slideIndex);
    myTimer = setInterval(function(){plusSlides(1)}, 4000);
    
    slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
  
    slideshowContainer.addEventListener('mouseenter', pause)
    slideshowContainer.addEventListener('mouseleave', resume)
})

// NEXT AND PREVIOUS CONTROL
function plusSlides(n){
  clearInterval(myTimer);
  if (n < 0){
    showSlides(slideIndex -= 1);
  } else {
   showSlides(slideIndex += 1); 
  }
  
  //COMMENT OUT THE LINES BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME
  
  if (n === -1){
    myTimer = setInterval(function(){plusSlides(n + 2)}, 4000);
  } else {
    myTimer = setInterval(function(){plusSlides(n + 1)}, 4000);
  }
}

//Controls the current slide and resets interval if needed
function currentSlide(n){
  clearInterval(myTimer);
  myTimer = setInterval(function(){plusSlides(n + 1)}, 4000);
  showSlides(slideIndex = n);
}

function showSlides(n){
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  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";
}

pause = () => {
  clearInterval(myTimer);
}

resume = () =>{
  clearInterval(myTimer);
  myTimer = setInterval(function(){plusSlides(slideIndex)}, 4000);
}

/*Body*/
*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    font-size: 90%;
    font-family: 'Times New Roman', Times;
    width: 100%;
    background: rgb(241, 242, 255);
}

/*Navbar*/
.header{
    margin-left: 0%;
    margin-right: 0%;
}

a img{
    padding-left: 40%;
}

.menu-logo{ 
    background: grey;
    position: fixed;
    width: 100%;
    height: 50px;
    box-shadow: 1px 1px 5px gray;
}
.logo{
    display: flex; 
    position: relative;
    flex-wrap: wrap; 
}
.logo .brand-name{
    padding-left: 40px;
    padding-top: 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.logo .brand-name a{
    color: rgb(0, 0, 255);
    text-decoration: none;
}
.logo .brand-name a:hover{
    color: rgb(7, 7, 161);
}
.brand-name .brand-sm{
    font-size: 20px;
}
.brand-name .brand-lg{
    font-size: 28px;
}

/*Slideshow*/
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto
}

.mySlides {
    display: none;
  height: 400px;
  border: solid 1px black;
     
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #222428;
    font-weight: bold;
    font-size: 30px;
    transition: .6s ease;
    border-radius: 0 3px 3px 0
}

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

.prev {
    left: -50px;
    border-radius: 3px 3px 3px 3px
}

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

.text {
    color: #f2f2f2;
    font-size: 15px;
    padding-top: 12px;
  padding-bottom: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #222428
}

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color .6s ease
}

.active,
.dot:hover {
    background-color: #717171
}

<!DOCTYPE html>

<html>

	<head>
		<title>PeTech Gaming</title>
  
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  </head>

    <!----------------------
      ----------------------

          Website body

      ----------------------
      --------------------->
	   <body>
               <header class="header">
                  <div class="menu-logo">
                   <span class="logo">
                       <div class="brand-name"><a href="<?php echo URLROOT; ?>"><span class="brand-lg">PE</span><span class="brand-sm">-TECH Gaming</span></a></div>

                   </span>
                   
                </div>
               </header>
   <div class="content">
           
    <!-----------------------------------
      -----------------------------------
        
        Container for the slideshow gallery

      -----------------------------------
      ---------------------------------->

      <div class="slideshow-container">
<div class="slideshow-inner">
  <div class="mySlides fade">

    <img  src='https://www.google.com/imgres?imgurl=https%3A%2F%2Fimg-s-msn-com.akamaized.net%2Ftenant%2Famp%2Fentityid%2FAAG1858.img%3Fh%3D552%26w%3D750%26m%3D6%26q%3D60%26u%3Dt%26o%3Df%26l%3Df%26x%3D1085%26y%3D769&imgrefurl=https%3A%2F%2Fwww.msn.com%2Fen-xl%2Faustralasia%2Fphotos%2Foutstanding-pictures-to-celebrate-world-photography-day%2Fss-AAG1b0N&tbnid=ugOO8ZnjYk_OXM&vet=12ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygxegUIARCZAQ..i&docid=AwzQkxTwEeLXjM&w=750&h=500&q=pictures&client=opera&ved=2ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygxegUIARCZAQ' style='width: 100%; height: 390px;' alt="sally lightfoot crab"/>
    <div class="text">Sally Lightfoot Crab</div>
  </div>

  <div class="mySlides fade">

    <img  src='https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1533177243638-dd485701f717%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26w%3D1000%26q%3D80&imgrefurl=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fsnail&tbnid=nL3OIYJ9sL9hXM&vet=12ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygoegUIARCDAQ..i&docid=W9vqofOwf1Q8nM&w=1000&h=668&q=pictures&client=opera&ved=2ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygoegUIARCDAQ' style='width: 100%; height: 390px;' alt="fighting nazca boobies"/>
    <div class="text">A scuffle between two Nazca Boobies</div>
  </div>

  <div class="mySlides fade">

    <img  src='https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.pexels.com%2Fphotos%2F46710%2Fpexels-photo-46710.jpeg%3Fauto%3Dcompress%26cs%3Dtinysrgb%26dpr%3D1%26w%3D500&imgrefurl=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fsummer%2F&tbnid=bY1h5IUggH8INM&vet=12ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygkegQIARB6..i&docid=MLbH2w6jfwuHxM&w=500&h=333&q=pictures&client=opera&ved=2ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygkegQIARB6' style='width: 100%; height: 390px;' alt="otovalo waterfall"/>
    <div class="text">A waterfall discovered on a hike in Otovalo</div>
  </div>

  <div class="mySlides fade">

    <img  src='https://www.google.com/imgres?imgurl=https%3A%2F%2Fmedia.gettyimages.com%2Fphotos%2Fpacific-coast-highway-101-in-del-mar-picture-id905296508%3Fs%3D612x612&imgrefurl=https%3A%2F%2Fwww.gettyimages.com%2Fphotos%2Fpacific-ocean&tbnid=L0YRpKRU-4JgNM&vet=12ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMyglegQIARB8..i&docid=BcppPlHbA1o_dM&w=612&h=408&q=pictures&client=opera&ved=2ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMyglegQIARB8' style='width: 100%; height: 390px;' alt="pelican"/>
    <div class="text">Pelican</div>
  </div>
  
  </div>


  <a class="prev" onclick='plusSlides(-1)'>&#10094;</a>
  <a class="next" onclick='plusSlides(1)'>&#10095;</a>
</div>
<br/>


<div style='text-align: center;'>
  <span class="dot" onclick='currentSlide(1)'></span>
  <span class="dot" onclick='currentSlide(2)'></span>
  <span class="dot" onclick='currentSlide(3)'></span>
  <span class="dot" onclick='currentSlide(4)'></span>
</div>

</div>

</div>
    <br/>
       </div>
      </div>
       </div>

<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>
<p>Some random text</p>

Answer 1

Чтобы управлять глубиной элементов страницы, вы должны использовать z-index (0 пар по умолчанию). Таким образом, чтобы поместить заголовок поверх всего остального, добавьте z-index = 1 в .menu-lo go