Z-index设置无效，下拉菜单应位于文件按钮后面

Question

我遗漏了一些我认为不重要的HTML和CSS，但一切都摆在摆弄的位置。 我希望菜单栏位于文件按钮的后面，请在底部查看预期和实际结果图像。

的jsfiddle

HTML

<div class="menubar">

    <div class="dropdown" id="file-btn">
      <button href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">File <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </div>
</div>

CSS

html,
body {
  height: 100%;
}

.analysis {
  display: flex;
  flex-direction: column;
  height: 100%;
}


/* MENUBAR */

.menubar {
  height: 35px;
  font-size: 12px;
  background-color: #eee;
  border: hsl(0, 0%, 75%) solid 1px;
  border-right: none;
  border-left: none;
  position: relative;
}

/* VIEWS-CTRLS-CNTNR */

#view-ctrls-cntnr {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#view-ctrls-cntnr button {
  font-size: inherit;
}


/*view-ctrls-cntnr */

/* FILE-BTN */

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

#file-btn button {
  line-height: 30px;
  color: black;
  background-color: transparent;
  border: none;
}

#file-btn button:focus {
  background-color: white;
}

#file-btn:hover {
  background-color: rgba(0, 0, 0, 0.0392157);
}

/* FILE-DROPDOWN */

#file-btn .dropdown-menu {
  margin-top: -1px;
  z-index: 10;
  left: -34px;
  border-left: none;
  border-radius: 0;
}

/* file-btn */

/* menubar */

预期

实际

Answer 1

尝试将以下样式添加到#file-btn button

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

还要将下拉菜单的margin-top增加到-2，以说明1 px边框和1 px重叠

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

更新的小提琴

Answer 2

该按钮没有z-index或堆栈上下文 ，当前您已对菜单本身进行了z排序（其名称混乱地称为#menu-btn ）。

#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;
}

固定小提琴

Answer 3

z-index属性仅适用于定位的元素（请参见此处 ）。 因此，您需要使z-index元素的位置相对，绝对或固定。 我会推荐position：relative，因为这不会改变元素的位置。