Bootstrap：麻烦的 <button> 和它的下拉菜单 <ul> 的耦合弄乱了 z-index答案

【问题标题】：Bootstrap: bothersome coupling of <button> and its dropdown menu <ul> messes z-indexBootstrap：麻烦的 <button> 和它的下拉菜单 <ul> 的耦合弄乱了 z-index
【发布时间】：2015-07-18 16:03:44
【问题描述】：

对于如何在某些情况下正确处理 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...）

【问题讨论】：

如果你不介意重写那个不幸的 CSS，.CodeMirror-gutter-wrapper { z-index: auto } 会修复它（参见bootply.com/li9aEQZsBo）
@HonoreDoktorr 啊，看来我再次简化了这个例子太多了。虽然它解决了小提琴中的问题，但它并没有在我的实际代码中，让我想出一个更好的小提琴......
@HonoreDoktorr 这是我遇到的实际问题的更新小提琴：jsfiddle.net/p1dssmrh
在.Codemirror-sizer 上设置z-index: 4，并确保其绝对定位的孩子是z-index: auto，如下所示：jsfiddle.net/g0nm5gp5 — 问题是，自动 z-index 会将 first 定位元素在顶部，而编号的 z-index 将 last 定位元素放在顶部（从而覆盖您的下拉菜单）。
@HonoreDoktorr 不错！您想将此作为答案发布吗？

标签： css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：