动态生成的容器上的引导下拉菜单 z-index答案

【问题标题】：Bootstrap dropdown-menu z-index on dynamically generated containers动态生成的容器上的引导下拉菜单 z-index
【发布时间】：2014-06-01 07:06:31
【问题描述】：

我在动态生成的容器中使用 Bootstrap 3 下拉菜单。下拉菜单出现在新生成的元素后面。请参阅图片参考。

容器项目position: relative; z-index: 1; 下拉菜单position: absolute; z-index: 10000;

我也用更高的 z-index 测试了 btn-group，但它不起作用。

这是一个工作小提琴http://jsfiddle.net/sGem8/

【问题讨论】：

你能为它创建一个小提琴吗？光看图也说不出话来..
会的。一会就贴出来。感谢您的回复。
嗨@VishalKhode，这是工作小提琴。 jsfiddle.net/sGem8
现在我知道为什么这不起作用了。尝试取出 z-index 属性，但仍然如此。此 div 包含在 jQueryUI 可拖动属性中，并强制 div 获取 z-index 为 0。我不想破解它。它可能会破坏与其相关的一些属性。我只是将按钮重新定位到其他地方。这么多头痛。再次感谢！
stackoverflow.com/a/28212815/1166597

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您不需要添加 z-index 属性..只需将其删除即可..
即

#container > li {
  display: block;
  border-radius: 3px;
  position: relative;
  padding: 15px;
  background: #ecf0f1;
  margin-bottom: 15px;
}

Working Fiddle

【讨论】：

谢谢 Vishal，刚才我真的以为 z-index 会覆盖下拉菜单的属性。

【解决方案2】：

在你的样式中修改下面的 css

#container > li {
 display: block;
 border-radius: 3px;
 position: relative;
 /* z-index: 0; */
 padding: 15px;
 background: #ecf0f1;
 margin-bottom: 15px;
}

【讨论】：

【解决方案3】：

我也遇到过同样的问题。在包含所有导航项的主容器内，我将每个最外层的 div 项设置为 position: relative 只有下拉菜单有position: absolute

要使下拉列表显示在所有项目上方，请添加

.dropdown{
position: absolute;
z-index : 999; //some high value
}

和容器中的其他物品有

.outer-divs{
position: relative;  
z-index: 1; //some low value
}

如果您仍然发现下拉菜单的行为不符合预期，尝试设置点击时打开下拉菜单的 div 项

.dropdown-container{
position  :static;
}

大多数人会发现最后一招最有价值。希望这会有所帮助。

【讨论】：