css - Bootstrap : bothersome coupling of <button> and its dropdown menu <ul> messes z-index

Question

对于在某些情况下如何正确处理 Bootstrap 的下拉菜单，我有点困惑。特别是，菜单似乎必须以这种方式构建:

<div class="btn-group">
  <button...>
  <ul class="dropdown-menu">
    <li...>
  </ul>
</div>

现在我想把这个按钮放在一些库提供的容器中，不幸的是它有 CSS。

看这个例子，由于父容器的z-index和position relative，顶部按钮的下拉出现在另一个按钮的下面。

http://jsfiddle.net/p1dssmrh/

下拉菜单似乎继承了相关上下文的特性，这使得它实际上并没有显示在页面的许多其他元素之上。

有没有一种方法可以通过仅更改 btn-group div 内部的内容来本地解决问题？

或者，有没有一种方法可以将按钮与其在 HTML 中的下拉菜单分离，这样它们就不会卡在同一个上下文中？

(此问题与 Bootstrap dropdowns menus appearing behind other elements - IE7 非常相似，但我受到其他库的限制，无法随意更改封闭的 HTML...)

Answer 1

在 .CodeMirror-sizer 上设置 z-index: 4，并确保其绝对定位的子级是 z-index: auto . Sample .

问题是，自动 z-index 将第一个定位的元素放在顶部，而编号的 z-index 将最后一个定位的元素放在顶部(从而覆盖您的下拉菜单)。