position:fixed;でヘッダーメニューを固定したいが、スクロールしていくと下のセクションに潜って、隠れてしまう。

position:fixed;でヘッダーメニューをで固定したいが、スクロールするとしたのaboutセクションの下に潜ってしまう。
検証で見た結果、ヘッダーメニュー自体は固定されていました。

潜らないようにしたいので解決法を教えてもらえたらありがたいです。

試したこと: 固定する要素にz-index: 9999;
全てのセクションにz-index:-9999;
を指定したが駄目だった。

<body>
  <header>
    <div class="container header-fixed">
      <div class="row" id="header-top">
        <div class="col-lg-6">
          <img src="img/28102019060225A.png">
        </div>
        <div class="col-lg-6 d-flex align-items-center" id="header-menu">
          <ul class="menu-list">
            <li class="" href="header">Home</li>
            <li class="" href="#about">About</li>
            <li class="" href="#services">Services</li>
            <li class="" href="#experience">Experience</li>
            <li class="" href="#contact">Contact</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="header-table">
      <div class="header-table-center">
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
              <div class="myname text-center mx-auto">
                <h1 class="text-white first-title p-2">Kousei.k</h1>
                <p id="typed" style="white-space:pre;">
                </p>
                <a href="#">Contact</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <p class="mr-5 text-right mb-5" id="page-top">
    <i class="fas fa-arrow-up p-1"></i>
  </p>
  <section class="mt-5" id="about">
    <h2 class="text-center"><span class="mr-2">About</span>Me</h2>
    <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <img src="img/IMG_0056.JPG" class="img-fluid  mx-auto img-thumbnail">
        </div>
        <div class="about-text col-lg-6">
          <h3 class="mb-3">初めまして、<span class="kousei">Kousei</span> です</h3>
          <p>
            東京在住。 猫が大好きです。
          </p>
          <P>
            常に<span class="user-red">ユーザー目線</span>でwebサイトを作りたいと思います。
          </P>
          <p>
            よろしくおねがいします。
          </p>
        </div>
      </div>
    </div>
  </section>

* {
  padding:0;
  margin:0;
}

html {
  overflow: auto;
}

header {
    width: 100vw;
    height: 100vh;
    background-image: url(./img/aoiike.jpg);
    background-size: cover;
    position: relative;
    clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 75%, 80% 90%, 50% 100%, 20% 90%, 0 75%, 0% 35%, 0 0);
}

header .header-fixed {
  width: 1140px;
  left: calc((100% - 1140px) / 2);
  position: fixed;
  top: 0;
  z-index: 9999;
}

header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.3);
    z-index: -1;
}

section {
  position: relative;
  z-index: -9999;
}