javascript - 使用函数 z index 时如何使 anchor 标签可点击

Question

导航设置为绝对的 headerContainer。在运动中它工作正常。
它需要从 headerContainer 后面拖放到页面的主要内容上。这样内容就消失了，菜单在上面。
我这样做是通过将我的主类设置为相对和负 z-index: 2;因为导航设置为负 -1；
现在一切正常，看起来不错。唯一的问题是我的导航中的 anchor 标签不再可点击。
我一直在寻找答案，但找不到任何相关内容。
有没有人可以告诉我为什么会发生这种情况？我还没有找到一个很好的解决方案。
我想要发生的事情似乎很简单。
我尝试将导航的高度设置为 0，然后单击将其设置为 100%。这将放下菜单，就好像它来自后面一样。但是给了我其他问题，例如 anchor 会在实际导航背景之后或早些出现。
这是带有完整示例的片段。

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
    menu.classList.toggle("show");
    icon.classList.toggle("fa-times");
}

* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    z-index: -1;
    /* display: none; */
    padding: 15px;
    width: calc(100% - 30px);
    position: absolute;
    top: -100px;
    left: -1px;
    background: #ffffff;
    transition: top 2s;
}
header nav.show {
    top: 100%;
}
header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}
/* --- MAIN --- */
main {
    position: relative;
    z-index: -2;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
 <!-- header-->
        <header>
            <div class="headerContainer">
                <!-- Logo or Brandname -->
                <div class="headerBrand">
                    <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
                </div>
                <!-- END Logo -->
                <!-- Nav -->
                <nav>
                    <ul class="mainMenu">
                        <li><a href="#">First link</a></li>
                        <li><a href="#">Second link</a></li>
                        <li><a href="#">Thirth link</a></li>
                        <li><a href="#">Fourth link</a></li>
                    </ul>
                </nav>
                <div class="menuBtn"><i class="fas fa-bars"></i></div>
                <!-- END Nav -->
            </div>
        </header>
        <!-- END header-->
        <!-- Main -->
        <main class="container">
            <section>
                <h1>This is a header</h1>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
            </section>
        </main>
        <!-- END Main-->

Answer 1

最简单的解决方法是添加 position: relative;z-index: 0;到 body元素。您的负 z-index 元素位于 body 元素后面，使它们无法点击。通过向正文添加 z-index，您可以强制创建堆叠上下文，而不会遇到此问题。
完整解释在这里:Why can't an element with a z-index value cover its child?

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
    menu.classList.toggle("show");
    icon.classList.toggle("fa-times");
}

* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    position: relative;
    z-index: 0;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    z-index: -1;
    /* display: none; */
    padding: 15px;
    width: calc(100% - 30px);
    position: absolute;
    top: -100px;
    left: -1px;
    background: #ffffff;
    transition: top 2s;
}
header nav.show {
    top: 100%;
}
header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}
/* --- MAIN --- */
main {
    position: relative;
    z-index: -2;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
 <!-- header-->
        <header>
            <div class="headerContainer">
                <!-- Logo or Brandname -->
                <div class="headerBrand">
                    <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
                </div>
                <!-- END Logo -->
                <!-- Nav -->
                <nav>
                    <ul class="mainMenu">
                        <li><a href="#">First link</a></li>
                        <li><a href="#">Second link</a></li>
                        <li><a href="#">Thirth link</a></li>
                        <li><a href="#">Fourth link</a></li>
                    </ul>
                </nav>
                <div class="menuBtn"><i class="fas fa-bars"></i></div>
                <!-- END Nav -->
            </div>
        </header>
        <!-- END header-->
        <!-- Main -->
        <main class="container">
            <section>
                <h1>This is a header</h1>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
            </section>
        </main>
        <!-- END Main-->

你可能会争辩说这些元素不在 body 后面，因为我们可以清楚地看到它们在背景的顶部，但这是由于 background propagation将背景从正文移动到 html 元素。
在初始代码中为 html 添加背景以禁用背景传播，您会注意到元素是如何在主体后面渲染的:

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
    menu.classList.toggle("show");
    icon.classList.toggle("fa-times");
}

* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
html {
  background:red;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    z-index: -1;
    /* display: none; */
    padding: 15px;
    width: calc(100% - 30px);
    position: absolute;
    top: -100px;
    left: -1px;
    background: #ffffff;
    transition: top 2s;
}
header nav.show {
    top: 100%;
}
header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}
/* --- MAIN --- */
main {
    position: relative;
    z-index: -2;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
 <!-- header-->
        <header>
            <div class="headerContainer">
                <!-- Logo or Brandname -->
                <div class="headerBrand">
                    <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
                </div>
                <!-- END Logo -->
                <!-- Nav -->
                <nav>
                    <ul class="mainMenu">
                        <li><a href="#">First link</a></li>
                        <li><a href="#">Second link</a></li>
                        <li><a href="#">Thirth link</a></li>
                        <li><a href="#">Fourth link</a></li>
                    </ul>
                </nav>
                <div class="menuBtn"><i class="fas fa-bars"></i></div>
                <!-- END Nav -->
            </div>
        </header>
        <!-- END header-->
        <!-- Main -->
        <main class="container">
            <section>
                <h1>This is a header</h1>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
            </section>
        </main>
        <!-- END Main-->