Html 如何从后面到前面显示标签？

我创建了一个菜单，在页面顶部有一个子菜单，在菜单下面有一个幻灯片图像

结果：请参考随附的图像文件： 子菜单显示在幻灯片图像的后面：

如何移动子菜单显示幻灯片图像的正面

这是我的css的顶部菜单： 但如果我添加幻灯片图像，子菜单显示在后面

{
保证金：0；
填充：0；
}
#菜单{
文本对齐：居中；
填充：10px；
}
#菜单ul{
列表样式类型：无；
文本对齐：居中；
}
#菜单里{
显示：内联块；
填充：10px；
位置：相对位置；
}
#菜单a{
颜色：#4C9CF1；
文字装饰：无；
字体大小：粗体；
显示：块；
字体大小：16px；
}
#菜单a：悬停{
颜色：#444；
}
.子菜单{
显示：无；
位置：绝对位置；
}
.子菜单li{
显示：无；
左边距：0！重要；
空白：nowrap；
}
.子菜单LIA{
显示：无；
左边距：0！重要；
}
#菜单li：悬停。子菜单{
显示：块；
}

试试这个

增加

z指数：100那么它的工作是什么

.sub-menu {
  z-index: 100;
}


{
保证金：0；
填充：0；
}
#菜单{
文本对齐：居中；
填充：10px；
}
#菜单ul{
列表样式类型：无；
文本对齐：居中；
}
#菜单里{
显示：内联块；
填充：10px；
位置：相对位置；
}
#菜单a{
颜色：#4C9CF1；
文字装饰：无；
字体大小：粗体；
显示：块；
字体大小：16px；
}
#菜单a：悬停{
颜色：#444；
}
.子菜单{
显示：无；
位置：绝对位置；
z指数：100；
}
.子菜单li{
显示：无；
左边距：0！重要；
空白：nowrap；
}
.子菜单LIA{
显示：无；
左边距：0！重要；
}
#菜单li：悬停。子菜单{
显示：块；
}


















为要显示在前面的项目设置更高的z索引


{
保证金：0；
填充：0；
}
#菜单{
文本对齐：居中；
填充：10px；
}
#菜单ul{
列表样式类型：无；
文本对齐：居中；
}
#菜单里{
显示：内联块；
填充：10px；
位置：相对位置；
}
#菜单a{
颜色：#4C9CF1；
文字装饰：无；
字体大小：粗体；
显示：块；
字体大小：16px；
}
#菜单a：悬停{
颜色：#444；
}
.子菜单{
显示：无；
位置：绝对位置；
z指数：100；
}
.子菜单li{
显示：无；
左边距：0！重要；
空白：nowrap；
}
.子菜单LIA{
显示：无；
左边距：0！重要；
}
#菜单li：悬停。子菜单{
显示：块；
}



















尝试此操作，必须添加您可能想要查看的位置
#menu {
        z-index:9000
        text-align: center;
        padding: 10px;

}   

#menu {

    text-align: center;
    padding: 10px;
    position：relative
    z-index:99;
}