在css中将position设置为absolute，将top设置为0，导致javascript classList.toggle（）不起作用

我使用以下javascript函数切换导航菜单：

var navList = document.getElementById("navbar-list-landing");
var openBtn = document.getElementById("nav-open-landing");

function toggleNav() {
  navList.classList.toggle("open");
}

在我将以下CSS添加到我试图隐藏的ul id之前，它工作正常：

   position: absolute;
   top: 0;

javascript函数将根本不运行（在函数开头使用console.log）

我在下面包含了整个nav的代码片段（去掉了所有必要的CSS，所以有点难看）

var navList=document.getElementById（“导航栏列表登录”）；
var openBtn=document.getElementById（“导航开放着陆”）；
函数toggleNav（）{
控制台日志（“测试”）；
navList.classList.toggle（“打开”）；
}

#导航着陆{
位置：固定；
背景：#fff；
高度：82px；
宽度：100%；
}
#导航着陆#导航标志着陆{
显示：块；
浮动：左；
宽度：220px；
}
#导航着陆#导航栏列表着陆{
位置：绝对位置；
排名：0；
高度：100vh；
宽度：100vw；
不透明度：0；
保证金：0；
}
#导航着陆#更多下拉菜单{
显示：无；
}
#导航着陆#导航打开{
显示：内联块；
背景：#fff；
宽度：20%；
身高：100%；
边框：1px纯黑；
}
#导航着陆，打开{
不透明度：1！重要；
}

从

#导航平台#导航栏列表平台

中删除

宽度：100vw

将修复此问题，但不确定这将如何影响布局的其余部分。问题是

=

位于

ul

之下（将网页视为层）-因此，您实际上以头韵方式单击

ul

，将img+a移动到div下方并添加

#nav open landing{position:relative；

-同样，这“解决”了问题，但可能会导致其他问题“真正的代码”-我无法测试，谢谢！我实际上可以将导航栏列表的z-index设置为-1是的，z-index也可以工作：p