javascript - Z-indexing，只是不会很好玩

Question

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

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

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

任何线索将不胜感激。

Answer 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 问题，但是您会被按钮弄乱，但这可能有助于您更接近问题:)