Html div上的clip path属性使div'；s z指数高于我的固定导航条

window.sr=ScrollReveal（）；
高级分隔缝（“.b1”{
期限：2000年，
来源：'顶部'，
距离：“80px”
});
高级分隔缝（“.b2”{
持续时间：1500，
来源：'顶部'，
距离：“80px”
})
高级分隔缝（“.b3”{
持续时间：1000，
来源：'顶部'，
距离：“80px”
});
高级分隔缝（“.w1”{
时长：3000，
来源:"对",，
距离：“200px”
});
高级分隔缝（'w2'{
持续时间：3500，
来源:"对",，
距离：“150px”
});
高级分隔缝（'.w3'{
持续时间：4000，
来源:"对",，
距离：“150px”
});
sr.REVEL（'.h2关于',{
期限：2000年，
来源：'顶部'，
距离：“150px”
});
const navBtn=document.querySelector（“.menu bar”）；
navBtn.addEventListener（'单击'，（）=>{
const b1=document.querySelector（'.b1'）；
const b2=document.querySelector（'.b2'）；
常量b3=document.querySelector（'.b3'）；
addAnimation（b1）；
addAnimation（b2）；
addAnimation（b3）；
函数addAnimation（条形图）{
bar.style.animationName=bar.className+'-animate'；
}
});
const aboutDiv=document.querySelector（'.about-us'）；
aboutDiv.addEventListener（'mouseover'，（）=>{
const line=document.querySelector（'.underline'）；
line.style.animationName='line'；
})

html，正文{
保证金：0；
填充：0；
}
.配菜{
位置：固定；
顶部：140px；
背景色：白色；
宽度：299.5px；
填充：10px；
过渡：一切都很轻松；
左：-500px；
不透明度：0.8；
}
.侧菜单{
列表样式类型：无；
文本对齐：居中；
}
.配菜李{
颜色：灰色；
字体大小：1.8rem；
利润率：6px；
左边距：-35px；
边缘底部：35px；
字体系列：“Ubuntu”；
}
.侧菜单li：悬停{
颜色：橙色；
光标：指针；
}
.菜单栏{
位置：固定；
左：50px；
顶部：80px；
}
.b1、.b2、.b3{
宽度：60px；
高度：7px；
背景色：红色；
保证金：.55雷姆；
边界半径：9px；
}
.b1{
背景颜色：浅绿色；
动画持续时间：3s；
动画填充模式：正向；
}
.b2{
背景色：白色；
动画持续时间：3s；
动画填充模式：正向；
}
.b3{
背景色：#FF4D；
动画持续时间：3s；
动画填充模式：正向；
}
@关键帧b1设置动画{
从{}
至{宽度：60px；高度：8px；位置：相对；左侧：-50px；顶部：41px；宽度：100px；边框半径：0；背景色：浅绿色；}
}
@设置动画的关键帧{
从{}
至{宽度：60px；
高度：8px；
位置：相对位置；
左：35px；
顶部：33px；
宽度：150px；
高度：8px；
边界半径：0；
背景色：白色；}
}
@关键帧b3设置动画{
从{}
至{宽度：60px；
高度：8px；
位置：相对位置；
顶部：25px；
右：-169px；
宽度：100px；
边界半径：0；
背景色：#ff4d；}
}
.介绍{
背景：浅蓝色；
宽度：100vw；
高度：100vh；
背景附件：固定；
背景尺寸：封面；
页边距底部：0；
}
h1{
字体系列：“锡达维尔草书”；
位置：绝对位置；
左：700px；
顶部：50px；
颜色：白色；
字体大小：3rem；
}
氢{
文本对齐：居中；
字体系列：“锡达维尔草书”；
字体大小：3rem；
填充：30px；
颜色：白色；
}
.关于我们{
利润上限：-40px；
填充底部：90px；
背景色：#339966；
宽度：100vw；
}
.下划线{
保证金：0；
位置：绝对位置；
左：570px；
底部：-120px；
背景颜色：橙色；
宽度：0px；
高度：3倍；
动画持续时间：0.7s；
动画填充模式：正向；
过渡定时功能：缓解；
}
@关键帧线{
从{左：370px；宽：0px；}
到{左：570px；宽：210px；边界半径：1.5px；}
}
p{
位置：相对位置；
左侧填充：20px；
顶部：-30px；
颜色：白色；
字体大小：1.8rem；
字间距：7px；
宽度：400px；
字体系列：“Josefin sans”；
左边距：130像素；
}
.fa插入符号向下{
位置：相对位置；
宽度：50px；
高度：50px；
字体大小：60px；
颜色：白色；
左：665px；
底部：300px；
变换：旋转（90度）；
}
.图像滑块{
背景色：暗灰色；
位置：相对位置；
宽度：440px；
高度：350px；
右：-710px；
底部：500px；
}
.对{
位置：相对位置；
宽度：50px；
高度：50px；
字体大小：60px；
颜色：白色；
左：1145px；
底部：715px；
变换：旋转（-90度）；
过渡：所有0.5s缓解；
}
.side味精{
字体系列：“锡达维尔草书”；
字体大小：3rem；
颜色：#e6ac00；
位置：相对位置；
右：-700px；
字体大小：粗体；
顶部：-560px；
}
.智利{
宽度：460px；
高度：345px；
位置：相对位置；
顶部：-500px；
z指数：11；
}
.菜单包装{
宽度：100VW；
背景色：#e6ac00；
高度：905px；
位置：相对位置；
顶部：-720px；
剪辑路径：多边形（0%0%，100%15%，100%100%，0%100%）；
}

El Metate |墨西哥食品

家
关于
菜单
接触
位置
新闻

墨西哥食品
关于我们
Lorem ipsum dolor sit amet，奉献精英。这是一种不可侵犯的权利，包括不可侵犯的权利。我们的解决方案是，建筑设计师需要一个类似的实验室，而不是一个简单的软件，一个最重要的资源，一个最重要的资源

P
布埃诺·科米达

增加菜单固定元素的

z索引

.menu-bars{
    position: fixed;
    left: 50px;
    top: 80px;
    z-index:1; /*added this*/
}

完整代码

window.sr=ScrollReveal（）；
高级分隔缝（“.b1”{
期限：2000年，
来源：'顶部'，
距离：“80px”
});
高级分隔缝（“.b2”{
持续时间：1500，
来源：'顶部'，
距离：“80px”
})
高级分隔缝（“.b3”{
持续时间：1000，
来源：'顶部'，
距离：“80px”
});
高级分隔缝（“.w1”{
时长：3000，
来源:"对",，
距离：“200px”
});
高级分隔缝（'w2'{
持续时间：3500，
来源:"对",，
距离：“150px”
});
高级分隔缝（'.w3'{
持续时间：4000，
来源:"对",，
D