javascript - 上手くいかないZインデックス

Question

私の人生では、以下に示すドロップダウンメニューが他のボタンの後ろに表示されないようにする方法がわかりません。関連するすべての要素の z-index を変更しましたが、何も機能していないようです。

デモンストレーションのために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 の問題が修正されますが、その後、ボタンがうまく動かなくなってしまいますが、これは問題に近づくのに役立つかもしれません:)