Html 汉堡包下拉列表与英雄图像内容重叠

我有一个动态剪辑路径，从汉堡菜单的右上角下拉，点击。一切都很好，除了我的英雄形象中的内容是重叠的。我试过z-index，但这些都是绝对位置，所以没有效果。如果我改变位置，它会把整页都弄脏。这个项目是在Django建造的，但这在这里似乎并不重要

HTML

{%load static%}

CSS

/*===========================================
重置CSS开始*
=========================================== */
* {
保证金：0；
填充：0；
}
身体，
html{
保证金：0；
填充：0；
身高：100%；
框大小：边框框；
字体系列：“蒙特塞拉特”，无衬线；
位置：相对位置；
}
a{
颜色：#fff；
}
李{
列表样式：无；
}
#html容器{
最小高度：100%；
}
#主要{
溢出：滚动；
填充底部：81px；
}
/*重置CSS结束*/
.展示{
背景图像：线性梯度(
归根结底，
rgba（0,0,0,0.2），
rgba（0,0,0,0.2）
),
url（/static/img/vg_home.jpeg）；
高度：100vh；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
.展示内容顶部{
位置：相对位置；
最高：25%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：#fff；
边缘底部：20px；
文本对齐：居中；
文本转换：大写；
}
.展示内容顶部h1{
字号：900；
字体大小：5vw；
}
.文字颜色{
颜色：rgb（15119392）；
}
#挥手{
高度：100px；
宽度：100px；
边框：10px纯银；
位置：绝对位置；
最高：34.15%；
左：46.2%；
z指数：-1；
转换：翻译（-50%，-50%）；
边界半径：50%；
-webkit动画：pulseEffect 4s无限线性；
动画：脉冲效果4s无限线性；
}
@-webkit关键帧脉冲效果{
从{
转换：转换（-50%，-50%）比例（0.5）；
边框：0px纯银；
不透明度：0；
}
到{
转换：转换（-50%，-50%）比例（1）；
边框：10px实心rgb（15119392）；
不透明度：1；
}
}
@关键帧脉冲效果{
从{
转换：转换（-50%，-50%）比例（0.5）；
不透明度：0.4；
}
到{
转换：转换（-50%，-50%）比例（3）；
不透明度：0；
}
}
.分离器{
颜色：rgb（15119392）；
}
.sub{
字体大小：1.5vw；
垂直对齐：中间对齐；
}
.showcase内容按钮>ul{
显示：内联；
文本对齐：居中；
位置：绝对位置；
最高：85%；
左：50%；
转换：翻译（-50%，-50%）；
列表样式：无；
填充：0；
}
.展示内容按钮a{
利润率：20px；
颜色：#fff；
边框：1px实心#fff；
填充：10px 40px；
过渡：0.75s；
}
.showcase内容按钮a：悬停{
背景色：rgb（15119392）；
边框：1px实心rgb（15119392）；
文字装饰：无；
颜色：#fff；
}
/* ===========================================
导航栏样式//开始
=========================================== */
标题{
背景：rgb（25,25,25）；
高度：81px；
位置：固定；
过渡：前0.5s缓进缓出；
宽度：100%；
}
.导航{
顶部：-81px；
}
导航{
位置：相对位置；
高度：81px；
背景：rgb（25,25,25）；
}
.导航链接{
显示器：flex；
列表样式：无；
宽度：50%；
身高：100%；
证明内容：周围的空间；
对齐项目：居中；
左边距：自动；
}
.nav链接李a{
字体大小：20px；
文字装饰：无；
颜色：#fff；
}
.汉堡包{
显示：无；
}
/*导航栏样式//结束*/
/* ===========================================
关于页面样式//开始
=========================================== */
.关于集装箱{
显示：块；
保证金：自动；
最大宽度：65%；
身高：85%；
背景色：rgba（2002002000.05）；
边界半径：20px；
}
.关于h6号货柜{
颜色：#fff；
文本对齐：居中；
右边距：250px；
填充顶部：60px；
字体大小：2.5rem；
字母间距：1.5px；
}
.关于集装箱.大的{
颜色：rgba（114245190）；
字母间距：3.5px；
字体大小：3.5rem；
}
.关于集装箱.段落{
颜色：#fff；
字号：1rem；
字母间距：1px；
左侧填充：20px；
右边填充：20px；
线高：2rem；
}
/*关于页面样式//结束*/
/* ===========================================
页脚样式//开始
=============================================*/
#页脚{
位置：相对位置；
高度：81px；
利润上限：-81px；
背景：rgb（25,25,25）；
颜色：白色；
文本对齐：居中；
明确：两者皆有；
z指数：1；
}
.页脚内容{
保证金：自动；
最大宽度：100%；
字体大小：1.25vw；
填充：5px0；
}
.页面内容>p>img{
最大宽度：2vh；
高度：自动；
}
p、 标志{
最大宽度：100%；
高度：自动；
页边距底部：0；
}
页脚h1{
字体大小：20px；
颜色：白色；
字体大小：粗体；
}
页脚a{
颜色：#fff；
边框底部：1px实心透明；
过渡：0.3s；
}
页脚a：悬停{
文字装饰：无；
颜色：#fff；
边框底部：1px实心rgb（15119392）；
}
/*页脚样式结束*/
/*================响应最大宽度：991p=====================*/
@媒体屏幕和屏幕（最大宽度：768px）{
#挥手{
显示：无；
}
.汉堡包一{
位置：绝对位置；
宽度：100%；
保证金：自动；
颜色：#fff；
最高：25%；
右图：-30%；
字体大小：40px；
}
导航{
位置：相对位置；
}
.汉堡包{
位置：绝对位置；
显示器：flex；
光标：指针；
背景：rgb（15119392）；
高度：81px；
宽度：100px；
右：0；
排名：0；
转换：转换（-5%，0%）；
z指数：3；
}
.导航链接{
位置：绝对位置；
背景：rgb（15119392）；
高度：100vh；
宽度：100%；
弯曲方向：立柱；
剪辑路径：圆形（100%-20%时为100px）；
-webkit剪辑路径：圆形（100%-20%时为100px）；
转换：所有1