red divの上にあるモーダルでドロップダウンメニューを表示するにはどうすればいいですか？

Question

ブートストラップモーダルの内側にあるドロップダウンメニューに問題があります。私は別の赤いdivボックスを持っています。この赤いボックスの上にドロップダウンメニューを開く必要があります。 Z-インデックスが機能していません...

ここは私ですfiddleとcssです。

.box1 { 
    display: block; 
    position: absolute; 
    height: 50px; 
    width: 100px; 
    background: red; 
    z-index: 10000; 
    left: 280px; 
    top: 200px; 
} 
#menu1 { 
    z-index: 100001; 
} 

EDITED：上のドロップダウンメニューの上にある赤いボックスと赤いボックスの上に表示されます。

Answer 1

ただ、このようなz-index: 999にBOX1からz-index: 10000を変更する：あなたは#myModalのzインデックスではない、ドロップダウンメニューを変更する必要が

.box1 { 
    display: block; 
    position: absolute; 
    height: 50px; 
    width: 100px; 
    background: red; 
    z-index: 999; 
    left: 280px; 
    top: 200px; 
} 

Answer 2

。ドロップダウンの親要素はモーダルなので、この理由は、z-indexが常に親から継承されるためです（設定されている場合）。したがって、ブートストラップからのデフォルトでは、モーダル（ドロップダウンの親）のz-index値があります。

.box1 { 
    display: block; 
    position: absolute; 
    height: 50px; 
    width: 100px; 
    background: red; 
    z-index: 10000; 
    left: 280px; 
    top: 200px; 
} 
#myModal { 
    z-index: 10001; 
} 

希望します。