固定ディビジョンのZインデックス積み上げが機能していないようです

Question

このZインデックスがページ上で動作しない理由はわかりません。ここで

は実施例である：https://jsfiddle.net/daeyqv31/

#login_modal_wrapper { 
    background: #eee; 
    background: red;/*rgba(0,0,0,0.7);*/ 
    width: 100%; height: 100%; 
    position: fixed; top: 0; left: 0; 
    z-index: 10003; 
} 

#login_modal { 
    z-index: 10002; 
    background: #eee; 
    border: 2px solid #092834; 
    border: 2px solid rgba(9,40,52,0.6); 
    border-radius: 20px; 
    width: 700px; 
    height: 240px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-left: -350px; 
    margin-top: -120px; 
} 
#login_modal_wrapper.over { 
    z-index: 100003; // this needs to go OVER login_modal 
} 
#ajax_spinner { 
    width: 34px; 
    height: 34px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-left: -17px; 
    margin-top: -17px; 
    z-index: 200000; 
} 

しかし、私はその後も#login_modal OVERを行くために#login_modal_wrapperのdivを強制することができるようにしたいです。ですから、私はこれを持っています（基本的な例）。

https://jsfiddle.net/daeyqv31/1/

ので、この：

<div id="ajax_spinner"> 
    loading icon 
</div> 
<div id="login_modal_wrapper" class="over"> 
    <div id="login_modal"></div> 
</div> 

...まだのz-indexが尊重されていないようです（それはまだ上#login_modalを示しています

<div id="ajax_spinner"> 
    loading icon 
</div> 
<div id="login_modal_wrapper"> 
    <div id="login_modal"></div> 
</div> 

はなり実際に後ろにあるべきときのトップ、#login_modal_wrapper

UPDATE：下記のように、より高い z-indexを親であるdivに適用する方法はありません。これを回避するために、私はほんの少しの周りにHTMLを手ブレし：

<div id="ajax_spinner"><img src="/images/new/ajax-loader.gif" /></div> 
<div id="login_modal"></div> 
<div id="login_modal_wrapper"></div> 

をこれが今期待どおりに動作します:)

Answer 1

#login_modal_wrapperが他の<div>要素が含まれているため、z-indexは動作しませんでした。

<div id="login_modal_wrapper"> 
    <div class="div-above"></div> 
    <div id="ajax_spinner"> 
    loading icon 
    </div> 
    <div id="login_modal"></div> 
</div> 

とCSS：あなたは試みることができる

.div-above { 
    width: 100%; 
    height: 100%; 
    background: blue; 
    position:fixed; 
    z-index: 10; 
} 

ここではupdated fiddleです。