Z-indexing，只是不会很好玩

【问题标题】：Z-indexing that just won't play niceZ-indexing，只是不会很好玩
【发布时间】：2012-05-30 19:29:21
【问题描述】：

对于我的生活，我无法弄清楚如何防止下拉菜单（如下所示）出现在其他按钮后面。我已经更改了所有相关元素的 z 索引，但似乎没有任何效果。

我已经设置了一个 jsfiddle 来演示：http://jsfiddle.net/theoryshaw/44HPM/3/

（将弹出 4 个 jsFiddle 警报...请关闭它们）

任何线索将不胜感激。

【问题讨论】：

您是否尝试过将 position:relative 应用于您想要操作的 z-index 的所有元素？
是的，我们说话的时候我正在尝试这个......似乎还没有找到魔法。

标签： javascript css twitter-bootstrap

【解决方案1】：

将css中的.dropdown-menu类改成：

.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 1px 0 0;
min-width: 160px;
padding: 4px 0;
position: relative;
top: 100%;
z-index: 1000000;
}

这解决了 z-index 问题，但是你会被按钮弄乱，但这可能有助于你更接近问题:)

【讨论】：

哈哈...是的，他们肯定出了问题。谢谢你的方法，我会继续搞砸的。