Z-index设置不起作用，下拉菜单应该在文件按钮后面

Question

我遗漏了一些HTML＆amp;我认为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边框和1px重叠

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

更新了fiddle

Answer 2

该按钮没有z-index也没有stacking context，您目前对菜单本身进行了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;
}

fixed fiddle

Answer 3

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