Javascript 如何使带有图像的div消失在菜单项后面？

我有一个带有div的网页，这个div包含一个图像。我还有一个菜单栏，悬停时会展开。然后，图像应位于菜单栏下方，当展开的菜单位于其“上方”时，图像不可见。然而，它并没有做到这一点：图像显然位于菜单的顶部。我如何修复此问题并使图像消失？我的CSS有没有做错什么

正文{
右边填充：0；
右边距：0；
左侧填充：0；
左边距：0；
边际上限：0；
}
.导航{
背景色：#F6F8FB；
位置：相对位置；
显示：内联块；
宽度：100%；
高度：80px；
/*溢出：隐藏*/
}
李国荣先生{
浮动：左；
填充：1%；
字体系列：AlegreyaSansSC Light；
字体大小：14px；
颜色：#637F92；
字母间距：0.52px；
身高：100%；
宽度：126px；
边际上限：0；
左边距：0；
右边距：0；
页边距底部：0；
}
李海军：悬停{
/*背景色：#0B619B*/
/*不透明度：0.1*/
/*颜色：#637F92*/
背景：rgb（221232 241）；
/*不支持RGBA的旧浏览器的回退*/
背景：rgba（221232 241,0.95）；
}
美国海军{
列表样式：无；
/*删除项目符号*/
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#F6F8FB；
最小宽度：70px；
/*盒影：0px 8px 16px 0px rgba（0,0,0,0.2）*/
填充：70px 126px；
不透明度：1；
}
.下拉列表内容：悬停{
背景：rgb（221232 241）；
/*不支持RGBA的旧浏览器的回退*/
背景：rgba（221232 241,0.95）；
}
.nav li:悬停。下拉列表内容{
显示：块；
}
.标志栏{
背景色：白色；
高度：180像素；
宽度：100%；
}
.标志{
高度：63px；
宽度：56px；
位置：相对位置；
最高：25%；
左：15%；
/*边框：3px实心#73AD21*/
}

威尔科曼
安格博特

试验
试验


卸下

哈罗
你好


安法哈特
康塔克

.st0{
填充物：0D629C；
冲程：#FFFFFF；
笔画宽度：0.3177；
行程限制：10；
}
.st1{
填充：#F2DE20；
}

您可以尝试使用z索引将图像定位在菜单栏后面

image {z-index: -1;} 

---

您可以尝试使用z索引将图像定位在菜单栏后面

image {z-index: -1;} 

---

有两件事是错误的：您的下拉菜单没有足够高的z索引来放置在SVG的顶部，并且您的

。下拉菜单
代码有一个95%不透明的RGBA背景（这意味着它有点透明）

通过改变这两件事，我相信这就是你想要的效果


正文{
右边填充：0；
右边距：0；
左侧填充：0；
左边距：0；
边际上限：0；
}
.导航{
背景色：#F6F8FB；
位置：相对位置；
显示：内联块；
宽度：100%；
高度：80px；
/*溢出：隐藏*/
}
svg{
z指数：-1
}
李国荣先生{
浮动：左；
填充：1%；
字体系列：AlegreyaSansSC Light；
字体大小：14px；
颜色：#637F92；
字母间距：0.52px；
身高：100%；
宽度：126px；
边际上限：0；
左边距：0；
右边距：0；
页边距底部：0；
}
李海军：悬停{
/*背景色：#0B619B*/
/*不透明度：0.1*/
/*颜色：#637F92*/
背景：rgb（221232 241）；
/*不支持RGBA的旧浏览器的回退*/
背景：rgba（221232 241,0.95）；
}
美国海军{
列表样式：无；
/*删除项目符号*/
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#F6F8FB；
最小宽度：70px；
/*盒影：0px 8px 16px 0px rgba（0,0,0,0.2）*/
填充：70px 126px；
不透明度：1；
z指数：100；
}
.下拉列表内容：悬停{
背景：rgb（221232 241）；
/*不支持RGBA的旧浏览器的回退*/
}
.nav li:悬停。下拉列表内容{
显示：块；
}
.标志栏{
背景色：白色；
高度：180像素；
宽度：100%；
}
.标志{
高度：63px；
宽度：56px；
位置：相对位置；
最高：25%；
左：15%；
/*边框：3px实心#73AD21*/
}


威尔科曼
安格博特

试验
试验


卸下

哈罗
你好


安法哈特
康塔克

.st0{
填充物：0D629C；
冲程：#FFFFFF；
笔画宽度：0.3177；
行程限制：10；
}
.st1{
填充：#F2DE20；
}
有两件事是错误的：您的下拉菜单没有足够高的z索引来放置在SVG的顶部，并且您的
。下拉菜单的代码有一个95%不透明的RGBA背景（这意味着它有点透明）

通过改变这两件事，我相信这就是你想要的效果


正文{
右边填充：0；
右边距：0；
左侧填充：0；
左边距：0；
边际上限：0；
}
.导航{
背景色：#F6F8FB；
位置：相对位置；
显示：内联块；
宽度：100%；
高度：80px；
/*溢出：隐藏*/
}
svg{
z指数：-1
}
李国荣先生{
浮动：左；
填充：1%；
字体系列：AlegreyaSansSC Light；
字体大小：14px；
颜色：#637F92；
字母间距：0.52px；
身高：100%；
宽度：126px；
边际上限：0；
左边距：0；
右边距：0；
页边距底部：0；
}
李海军：悬停{
/*背景色：#0B619B*/
/*不透明度：0.1*/
/*颜色：#637F92*/
背景：rgb（221232 241）；
/*不支持RGBA的旧浏览器的回退*/
背景：rgba（221232 241,0.95）；
}
美国海军{
列表样式：无；
/*删除项目符号*/