Javascript 使用函数z索引时，如何使锚定标记可单击

导航被设置为绝对至headerContainer。在运动中，它工作得很好。 它需要从headerContainer的后面放到页面的主要内容上。这样，内容消失，菜单位于顶部。 我通过将我的主类设置为relative和负z-index:2来实现这一点；因为导航设置为负-1

现在一切正常，看起来不错。唯一的问题是，我的导航内的锚标签不再可点击

我一直在寻找答案，但没有找到任何相关的。 有人能告诉我为什么会这样吗？我还没有找到解决这个问题的好办法

我想发生的事情似乎很简单。。它需要从后面掉下来，或者至少从页眉后面产生想法

我尝试将导航高度设置为0，然后单击将其设置为100%。那会把菜单从后面掉下来。但给了我其他的问题，比如锚点会在实际导航背景之后或之前出现

下面是一个完整示例的片段

让Btn=document.querySelector（“.menuBtn”）；
let menu=document.querySelector（“nav”）；
让icon=document.querySelector（“.fa条”）；
Btn.onclick=（）=>{
menu.classList.toggle（“显示”）；
icon.classList.toggle（“fa时间”）；
}

*{
保证金：0；
填充：0；
}
身体{
背景:#f5；
颜色：#1F；
字体系列：“开放式Sans”，无衬线；
字体大小：20px；
}
a{
文字装饰：无；
颜色：#1F；
}
/*---标题--*/
标题{
宽度：100%；
高度：自动；
背景：#FFF；
}
.headerContainer、.container{
宽度：90%；
最大宽度：1140px；
保证金：自动；
填充：15px；
}
.校长{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
位置：相对位置；
}
/*---标志--*/
海得勃朗先生{
字号：2rem；
字号：800；
显示器：flex；
对齐项目：居中；
}
.海德伯兰国际管理集团{
填充：0 15px 0 0；
}
/*---导航--*/
标题导航{
z指数：-1；
/*显示：无*/
填充：15px；
宽度：计算（100%-30px）；
位置：绝对位置；
顶部：-100px；
左：-1px；
背景：#ffffff；
过渡：前2名；
}
标题导航显示{
最高：100%；
}
标题导航ul.main菜单{
列表样式：无；
}
收割台导航ul li a：悬停{
颜色：红色；
}
menuBtn先生{
宽度：35px；
高度：35px；
文本对齐：居中；
背景：红色；
字体大小：25px；
边界半径：5px；
光标：指针；
颜色：#FFF；
}
/*---主要--*/
主要{
位置：相对位置；
z指数：-2；
}

这是一个标题
这是一些文本

这是一些文本

这是一些文本

这是一些文本

这是一些文本

这是一些文本

任何子项的z索引都直接从父项继承-因此，如果在z索引为-1的父项中有一个z索引为100的子项，则该子项相对于-1为100

您应该能够在不依赖z索引的情况下构建标题和菜单。例如，我从代码中提取了索引并将其组合在一起（只需添加动画）：

---

对于这种类型的效果，由于您指出的问题，我使用不同的技术来模拟跌落效果

只需将

定位到您想要的位置，并使用从0到足够大的最大高度值，然后删除所有负z索引

在下面的代码段中找到解决方案

让Btn=document.querySelector（“.menuBtn”）；
let menu=document.querySelector（“nav”）；
让icon=document.querySelector（“.fa条”）；
Btn.onclick=（）=>{
menu.classList.toggle（“显示”）；
icon.classList.toggle（“fa时间”）；
}

*{
保证金：0；
填充：0；
}
身体{
背景:#f5；
颜色：#1F；
字体系列：“开放式Sans”，无衬线；
字体大小：20px；
}
a{
文字装饰：无；
颜色：#1F；
}
/*---标题--*/
标题{
宽度：100%；
高度：自动；
背景：#FFF；
}
.headerContainer、.container{
宽度：90%；
最大宽度：1140px；
保证金：自动；
填充：15px；
}
.校长{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
位置：相对位置；
}
/*---标志--*/
海得勃朗先生{
字号：2rem；
字号：800；
显示器：flex；
对齐项目：居中；
}
.海德伯兰国际管理集团{
填充：0 15px 0 0；
}
/*---导航--*/
标题导航{
z指数：9；
/*显示：无*/
溢出：隐藏；
填充：0 15px；
宽度：计算（100%-30px）；
位置：绝对位置；
/*顶部：-100px；
左：-1px*/
最高：100%；
左：0；
背景：#ffffff；
/*过渡：前2名*/
最大高度：0px；
过渡：最大高度0.5s缓和，填充0.5s缓和；
}
标题导航显示{
/*最高：100%*/
最大高度：500px；
填充：15px；
过渡：最大高度0.5s缓和，填充0.5s缓和；
}
标题导航ul.main菜单{
列表样式：无；
}
收割台导航ul li a：悬停{
颜色：红色；
}
menuBtn先生{
宽度：35px；
高度：35px；
文本对齐：居中；
背景：红色；
字体大小：25px；
边界半径：5px；
光标：指针；
颜色：#FFF；
}
/*---主要--*/
主要{
职位：rel
* {
    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;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    /* display: none; */
    padding: 15px;
    background: #ffffff;
    transition: top 2s;
}

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 --- */

nav {
  position:absolute;
  opacity:0;
}

nav.show {
  top:100px;
  opacity:1;
}