动态生成的容器上的Bootstrap下拉菜单z-index

Question

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

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

我也测试了具有更高z-index的btn-group，但它没有用。

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

Answer 1

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

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

<强> Working Fiddle

Answer 2

修改样式中的以下css

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

Answer 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;
}

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