アコーディオンメニューで出したul要素が画像に被り、見えない

Question

実現したいこと

アコーディオンメニューを表示させたい

問題

レスポンシブで767px以下はメニューバーをアコーディオンメニューにしているのですが、クリックして降りてきたul要素部分が下の画像に被ってしまい、表示が見えなくなります。

やったこと

ul要素にpositionを指定したり、メニュー部分をz-index:1にしたり、画像をz-index:-1にしたりしているのですが、どうしても被ってしまいます。
どうしたら表示されるでしょうか？

 <header>
        <div class="header-logo">
            <img src="/img/logo.png" alt="">
        </div>
                <button><img src="/img/button.png" alt="" class="icon-img"></button>
        <nav>
            <ul>
                <li><a href="#"><span class="first-child">card</span></a></li>
                <li><a href="#">news</a></li>
                <li><a href="#">price</a></li>
                <li><a href="#">access</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>
    </header>
</div>

            <div class="home-inner">
                <img src="/img/top.png" alt="">
                    <div class="caption">
                            <h1>〇〇〇</h1>
                            <p>〇〇〇</p>
                            <button type="submit">          
                                〇〇〇
                            </button>
                        </div>
            </div>

$breakpoints: (
  "sp": "screen and (max-width: 767px)",
  "tab": "screen and (max-width: #{$layout-width-inner - 1px})",
  "pc": "screen and (min-width: #{$layout-width-inner})",
);

// メディアクエリー
@mixin mq($breakpoint: sp) {

  @media #{map-get($breakpoints, $breakpoint)} {

    @content;
  }
}


body {
  font-family: Yu Gothic;
  font-weight: bold;
  max-width: 1366px;
  margin: 0 auto;
}
.container-wrapper {
  width: 100%;
  z-index: 1;

header {
width:100%;
max-width: 1366px;
height: 100px;
background: #3F51B5;
overflow:hidden;
opacity: 1;

@include mq('sp') {
height: 80px;
}
}

.header-logo {
position: relative;
top: 31px;
bottom: 30px;
margin-left: 140px;
margin-right: 0;
width: 200px;
height: 39px;
opacity: 1;

@include mq('tab') {
  width: 150px;
  
}
@include mq('sp') {
  top: 21px
}

}
button {
  position: relative;
background-color: #3F51B5;
border: 1px solid #3F51B5;
height: 100%;
top: -25px;
   float: right;
 display: none;
@include mq('sp') {
     display: inline-block;
   }
 }

.icon-img{

  width: 30px;
  top: 0px;
  position: relative;
  float: right;
  margin-right: 20px;
  z-index: 1;
  top: -10px;

  @include mq('sp') {
    display: inline-block;
  }
}

  

  

nav {
position: relative;
width: 344px;
height: 26px;
opacity: 1;
float: right;
margin-right: 140px;
z-index: 1;

@include mq('tab') {
  margin:0 10px;
}

@include mq('sp') {
 bottom: 10px;
}

}
ul {
letter-spacing: 0;
opacity: 1;
display: flex;
list-style: none;
margin: 0;
padding: 0;
font-weight: normal;
font-size: 16px;
z-index: 2;

}

nav ul {
  @include mq('sp') {
    display: none;
    position: absolute;
    z-index: 2;
    background-color: #3F51B5;
    right: -72px;
    top: 50px;

  }
}


li a{
  margin-right: 24px;
  text-transform: capitalize;
  color: #FFFFFF;
  text-decoration: none;
  background:#3F51B5;
  z-index: 1;


  @include mq('tab') {
    margin-right: 12px
  }
}
.first-child{
  text-decoration: underline red;
  margin-top: 0.5px;
}


}

.home-inner {
    height: 600px;
    position: relative;
    
    img {
      background-size: cover;
      width:100%;
      max-width: 100%;
      height: auto;
      z-index: -2;
      position: relative;
    }
    

window.addEventListener('DOMContentLoaded', function(){
$("button").click(function(){
    $("nav ul").slideToggle(200);
});
});