Javascript z-索引在侧导航上不工作

我试图让汉堡包菜单位于侧导航的“顶部”，以便稍后用这个汉堡包切换侧导航（而不是用x来关闭它）

问题是z索引似乎被忽略了。为什么会这样？我如何解决这个问题，即使sidenav进来了，也要把汉堡带到前面

函数openNav（）{ document.getElementById（“myNav”）.style.width=“100%”； } 函数closeNav（）{ document.getElementById（“myNav”）.style.width=“0%”； }

.overlay{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景颜色：蓝色；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
.前线{
z指数：1050；
}

全屏覆盖导航示例
☰ 打开

请检查

.front

的

位置

属性。

位置：静态，
位置：初始忽略
z索引

如果要在不更改位置的情况下给出
z索引
，请更改为
position:relative


函数openNav（）{
document.getElementById（“myNav”）.style.width=“100%”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.width=“0%”；
}
.overlay{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景颜色：蓝色；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
.前线{
位置：绝对位置；
z指数：1050；
}

全屏覆盖导航示例
☰ open
Z-index仅适用于定位元素，也仅适用于其自身的堆叠上下文
将
front
类添加到
h2
元素中，并将
位置：relative
添加到
front
样式：


函数openNav（）{
document.getElementById（“myNav”）.style.width=“100%”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.width=“0%”；
}
.overlay{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景颜色：蓝色；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
.前线{
z指数：1050；
位置：相对位置；
}

全屏覆盖导航示例
☰ 打开
不在后面。你能提供一个工作解决方案截取的代码吗？