Bootstrap：<button>及其下拉菜单的麻烦耦合<ul> messes z-index

Question

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

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

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

请参阅此示例，由于父容器z-index和位置相对，顶部按钮的下拉列表显示在另一个按钮下。

http://jsfiddle.net/p1dssmrh/

下拉菜单似乎继承了相对上下文的功能，这使得它实际上不会显示在页面的许多其他元素之上。

是否有办法通过仅更改btn-group div内的内容来本地解决问题？

或者，是否有办法将按钮与HTML中的下拉菜单分离，以便它们不会卡在同一个上下文中？

（这个问题与Bootstrap dropdowns menus appearing behind other elements - IE7非常相似，但我受到其他库的限制，不能随意更改封闭的HTML ...）

Answer 1

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

问题是，自动z-index将第一个定位元素置于顶部，而带编号的z-index将最后定位元素置于顶部（从而覆盖您的下拉列表）。