Html Z索引设置不起作用，下拉菜单应位于文件按钮后面

我遗漏了一些我认为不重要的HTML和CSS，但这些都是胡扯。我希望菜单栏位于文件按钮后面，请参见底部的预期和实际结果图像

HTML 预期

实际的

---

尝试将以下样式添加到

#文件btn按钮中

#file-btn button {
    /*previous styles*/
    position: relative;
    z-index: 99;
}

同时，将下拉列表的

边距顶部增加到-2，以说明1px边框和1px重叠

#file-btn .dropdown-menu {
  margin-top: -2px;
  /*other styles*/
}

已更新
尝试将以下样式添加到
#文件btn按钮

#file-btn button {
    /*previous styles*/
    position: relative;
    z-index: 99;
}

同时，将下拉列表的
边距顶部增加到-2，以说明1px边框和1px重叠

#file-btn .dropdown-menu {
  margin-top: -2px;
  /*other styles*/
}

更新了按钮没有
z索引
，您当前也没有对菜单本身进行z排序（其名称混淆为
#菜单btn
）

该按钮没有
z索引
，您当前也没有对菜单本身进行z排序（其名称混淆为
#菜单btn
）

z索引属性仅适用于定位元素（请参见）。因此，需要使具有z索引的元素的位置为相对、绝对或固定。我会推荐position:relative，因为这不会改变元素的位置
 z索引属性仅适用于定位元素（请参见）。因此，需要使具有z索引的元素的位置为相对、绝对或固定。我会推荐position:relative，因为这不会改变元素的位置

#file-btn {
  margin-left: 34px;
  display: inline-block;
  height: 100%;
}

#file-btn button {
  position: relative;
  line-height: 30px;
  color: black;
  background-color: transparent;
  border: none;
  z-index: 100;
}