aタグのリンクが機能しません。

Question

前提・実現したいこと

aタグのリンクが機能しないので、なんとかしたいです。
↓コーディングの途中でまだ未完成ですが、このサイトです。
このサイト

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

ヘッダーのナビ部分のリンクが機能しません。
ヘッダーのナビとは↓これのTOP ABOUT SERVICE WORKS...というところです。
ヘッダーのナビはこれ

ホバーしても指のマークにならないですし、クリックできません。
さらに、リンク部分をダブルクリックすると、上の方に、謎の大きい青いリンクしたときに表示される四角い部分が表示されます。これがなぜなのかわからないですが、解決へのヒントになるのではないかと思います。
↓青い四角いものはこれです。（下のリンク先の画像ではグレーになっていますが、ダブルクリックしたときは青の四角になっています）
これ

該当のソースコード

<header class="header position-relative z-1">
        <h1>
            <img src="img/index/top-h1-logo.png" srcset="img/index/top-h1-logo.png 1x,img/index/[e-mail]" alt="mirai image ロゴ">
        </h1>
        <nav class="pc">
            <ul class="flex jcsb">
                <li>
                    <a href="index.html">
                        TOP
                    </a>
                </li>
                <li>
                    <a href="about.html">
                        ABOUT
                    </a>
                </li>
                <li>
                    <a href="service.html">
                        SERVICE
                    </a>
                </li>
                <li>
                    <a href="">
                        WORKS
                    </a>
                </li>
                <li>
                    <a href="">
                        VOICE
                    </a>
                </li>
                <li>
                    <a href="">
                        NEWS
                    </a>
                </li>
                <li>
                    <a href="archive.html">
                        BLOG
                    </a>
                </li>
                <li>
                    <a href="">
                        CONTACT
                    </a>
                </li>
            </ul>
        </nav>
        <div class="sns-link pc">
            <ul>
                <li>
                    <a href="">
                        <img src="img/index/instagram-logo.svg" alt="インスタグラムロゴ">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/index/facebook-logo.svg" alt="フェイズブックロゴ">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/index/twitter-logo.svg" alt="ツイッターロゴ">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/index/line-logo.svg" alt="ラインロゴ">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/index/youtube-logo.svg" alt="ユーチューブロゴ">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/index/mic-logo.svg" alt="マイクロゴ">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/index/note-logo.svg" alt="ノートロゴ">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/index/cart-logo.svg" alt="カートロゴ">
                    </a>
                </li>
            </ul>
        </div>
    </header>

.header{
    background:url(../img/index/[e-mail]) no-repeat;
    background-position:top center;
    background-size:cover;
    width:1600px;
    max-width:100%;
    margin:0 auto;
    height:160vh;
}
@media screen and (min-width:1600px){
    .header{
        background:url(../img/index/[e-mail]) no-repeat;
        background-position:top center;
        background-size:cover;
        width:100%;
        height:160vh;
    }
}
@media screen and (max-width:640px){
    .header{
        background: url(../img/index/[e-mail]) no-repeat;
        background-position:top center;
        background-size:cover;
        height:100vh;
        width:100%;
    }
}
.header h1{
    position:absolute;
    top:20px;
    left:52%;
    transform:translateX(-50%);
}
.header h1 img{
    width:87%;
}
@media screen and (max-width:640px){
    .header h1{
        position:absolute;
        top:50px;
        left:100px;
    }
    /* .header h1 img{
        width:60%;
    } */
}
.header nav{
    position:absolute;
    top:580px;
    left:50%;
    transform:translateX(-50%);
    width: 80%;
    max-width:1350px;
}
@media screen and (min-width:1150px){
    .header nav{
        top:calc(580 / 1150 * 100vw);
    }
}
.header nav ul li a{
    font-family : 'AbeatbyKai',sans-serif;
    font-size : 12px;
    line-height : 52px;
    letter-spacing : 6px;
    color : #604C3F;
}
.header .sns-link{
    position:absolute;
    top:10%;
    right:30px;
}
.sns-link ul li{
    margin-bottom:50px;
}
.sns-link ul li:last-of-type{
    margin-bottom:0;
}
.sns-link ul li a img{
    width:26px;
    height:26px;
}

試したこと

cssの指定で他のところで意図しない反映がされているかもしれないと思い、デベロッパーツールで探してみましたが、特に変な指定がなかったです。

補足情報（FW/ツールのバージョンなど）

なぜリンクが機能しないかわかりません。どなたかわかる方いらっしゃったら教えてください。よろしくお願い致します。

Answer 1

<header class="header position-relative z-1"> で z-1 というクラスが z-index を下げているせいです。外してみてください。

Comments

[shunsaku87]

解決しました！
わざわざありがとうございました。