ハンバーガーメニューがトップ画像に隠れてしまいます。

前提・実現したいこと

html, CSS, JavaScriptを使って、カルーセル画像群の上に、ハンバーガーメニューを出させたいです。

発生している問題・エラーメッセージ

画像の下に、ハンバーガーメニューが隠れてしまいます。

該当のソースコード

html

<!DOCTYPE html> <html lang="ja"> <head>  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="format-detection" content="telephone=no">

<title>My Portfolio</title>

<meta name="description" content="">
<meta name="keywords" content="ポートフォリオ,ブログ">
<meta property="og:title" content="My Portfolio">
<meta property="og:type" content="website">
<meta property="og:image" content="">  <!--サムネイル画像をURLで当て込む --> 
<meta property="og:url" content="">
<meta property="og:site_name" content="">
<meta property="og:description" content="">
<meta property="og:locale" content="ja_JP">

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../About_My_Site/CSS/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css"> 
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

</head>

  <body>
  <header>
    <nav id="nav">
      <ul>
        <li><a href="#">works</a></li>
        <li><a href="#">profile</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </nav>
    <div id="hamburger">
      <span class="inner_line" id="line1"></span>
      <span class="inner_line" id="line2"></span>
      <span class="inner_line" id="line3"></span>
    </div>
    <h1>My Portfolio</h1>
  </header>

  <div class="splide-outer"> 
    <div class="splide"> 
      <div class="splide__track"> 
        <ul class="splide__list"> 
          <li class="splide__slide"> 
            <picture> 
              <source media="(min-width: 768px)" srcset="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_PC"> 
              <img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_SP"> 
            </picture> 
          </li> 
          <li class="splide__slide"> 
            <picture> 
              <source media="(min-width: 768px)" srcset="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2_PC"> 
              <img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2_SP"> 
            </picture> 
          </li> 
          <li class="splide__slide"> 
            <picture> 
              <source media="(min-width: 768px)" srcset="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3_PC"> 
              <img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3_SP"> 
            </picture> 
          </li> 
        </ul> 
      </div> 
    </div> 
  </div>
</body>  
<!-- partial -->


```CSS
@charset "UTF-8";

/* -------------------------------- base -------------------------------- */

.html {
  font-size: 62.5%;
}

.body {
  font-size: 1.6rem; 
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}



/* -------------------------------- hamburger -------------------------------- */

@media screen and (max-width: 480px) {
 #nav {
  z-index: 2;
 }

  #nav ul li {
    font-size: 14px;
    position: relative;
  }

  h1 {
    display: none;
  }

  h2 {
    display: block;
    font-size: 14px;
  }
}

* {
  margin: 0;
  padding: 0;
  }

body {
  background: #ffffff;
}

header {
  position: fixed;
  width: 100%;
  height: 90px;
  background: #ffffff;
}

#nav{
  position: relative;
  height: 100vh;
  width: 40%;
  left: -40%;
  top: 0;
  background: #ffffff;
  transition: .7s;
  z-index: 2;
}

#nav ul{
  padding-top: 80px;
}

#nav ul li{
  list-style-type: none;
  font-size: 20px;
}

#nav a{
  display: block;
  text-decoration: none;
  color: #000000;
  margin: 0 15px;
  padding: 10px;
  transition: .5s;
}

#nav li a:hover{
  color: #8d8d8d;
  background: #cd5c5c;
  border-bottom: none;
}

#hamburger {
  display: block;
  position: relative;
  top: 20px;
  left: 30px;
  width: 50px;
  height: 44px;
  cursor: pointer;
  transition: 1s;
}

.inner_line {
  display: block;
  position: absolute;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #5f5f5f;
  transition: 1s;
  border-radius: 4px;
}

#line1 {
  top: 0;
}

#line2 {
  top: 20px;
}

#line3 {
  bottom: 0px;
}

h1, h2 {
  text-align: center;
  line-height: 90px;
  color: #a7a7a7;
}

h2 {
  display: none;
}

p {
  padding-top: 200px;
  text-align: center;
}

.in{
  transform: translateX(100%);
}

.line_1,.line_2,.line_3{
  background: #000000;
}

.line_1 {
  transform: translateY(20px) rotate(-45deg);
  top: 0;
}

.line_2 {
  opacity: 0;
}

.line_3 {
  transform: translateY(-20px) rotate(45deg);
  bottom: 0;
}

/* -------------------------------- body -------------------------------- */

.splide-outer {
  max-width: 100%;
  margin: auto;
  z-index: 1;
}

.splide__slide img {
  width: 100%;
}

JavaScript
1function hamburger() {
2  document.getElementById('line1').classList.toggle('line_1');
3  document.getElementById('line2').classList.toggle('line_2');
4  document.getElementById('line3').classList.toggle('line_3');
5  document.getElementById('nav').classList.toggle('in');
6}
7document.getElementById('hamburger').addEventListener('click' , function () {
8  hamburger();
9} );
10
11document.addEventListener('DOMContentLoaded', () => {
12  new Splide('.splide', {
13    type: 'loop',
14  }).mount()
15})