Javascript 全屏菜单仅出现在导航栏中

我有下面的html和css。问题是，当它运行时，全屏菜单仅出现在导航栏中。该问题仅在使用safari时出现

我可以解决我摆脱的问题

.nav {
position: fixed;
}

但我仍然希望导航栏固定在页面顶部

.nav{
字体系列：Arial BoldMT；
字体大小：16px；
列表样式：无；
文本对齐：右对齐；
填充：0px 0 0px 0；
盒影：0px 1px 1px#d3d3；
背景色：白色；
宽度：100%；
z指数：0.1；
溢出：自动；
位置：固定；
排名：0；
}
.nav p{
浮动：左；
左边距：40px；
颜色：#333333；
}
.覆盖{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
.滑块{
字体大小：30px；
光标：指针；
浮动：对；
右边距：40px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.overlay a{font size:20px}
.overlay.closebtn{
字体大小：40px；
顶部：15px；
右：35px；
}
}

利亚姆·文森

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

是无效的css

z索引必须是整数-负或正。大多数浏览器可能只是将其视为0，但Safari不知道如何处理它。所以，将其更改为一个整数，如

 z-index:1;

并将覆盖设置为z-index:2（尽管我建议将这些数字隔开，以防您必须为其他元素编制索引。例如，z-index:100；和z-index:200；）

将其设置为“已修复”（top为0），当您纠正了出现的z-index问题后，应该可以将其修复到页面顶部。

问题是

.nav {
overflow: auto;
}

---

它阻止了覆盖显示在导航分区之外。

我附加了它，但没有任何更改。从导航中完全删除overflow属性。如果要隐藏溢出，请在正文中添加溢出-x:hidden（不要添加溢出-y:hidden，否则将无法滚动）。

.nav {
overflow: auto;
}