z-index for position：固定

Question

私のウェブサイトにモーダルポップアップを入れたいと思います。それはのHTMLは次のようである：

<div id="thePopup" class="popup" style="display:none;"> 
    <div class="popup-shadow">.</div> 
    <h3>My Details</h3> 
    <p>Message....</p> 
</div> 

は、それから私は、CSSを持っている（まあ、CSSにコンパイル実際SASS、。）このように：ディスプレイにthePopupを設定ボタンがあり

.popup { 
    z-index:10000; 
    width:32em; 
    position:absolute; 
    left:20%; 
    width:60%; 

    .popup-shadow { 
     position:fixed; 
     top:0%; 
     left:0%; 
     width:100%; 
     height:100%; 
     z-index:9000; 

     background-color:#999999; 
     /* I have yet to do it, but the shadow will be slightly transparent */ 
    } 
} 

：ブロックユーザーがクリックするとポップアップは、私のウェブサイトのコンテンツパネルの1つの中に入れ子になっています。 position:absoluteなので、親パネルの上に表示されます。 thePopupをposition:fixedに設定しないと、ユーザーの画面の高さよりも大きくなる可能性があります。また、ユーザーが画面上を上下にスクロールできるようにしたいと考えています。しかし、私はポップアップではない画面上のどこでも暗くしたいと思っています。ユーザーに対話する必要があることをユーザーに示すためです。

これは私が問題に遭遇するところです - popup-shadowは、zレベルが低いにもかかわらず、thePopupのinfrontにレンダリングされています。なぜこれがわからないのですか？ popup-shadow divを取り除くと、thepopupが期待どおり画面に表示されます。これはなぜ誰にも分かりますか？ z-indexの値が小さくても、子divは常にその親の上に表示されますか？

Answer 1

私が間違っているかもしれないが、それはdiv要素の子要素は常になることらしいですdivの方がzレベルが高い場合でもdivの前にレンダリングされます。私の解決策は、popup-shadow divを別の場所に配置し、javascript関数のペアを使用して、ポップアップが表示され、非表示になったときに常に表示/非表示にすることでした。

Answer 2

利用z-index:-1;代わりの影のdivとz-index:1;ためz-index:9000;の代わりに、ポップアップdiv要素

参照Demoのz-index:10000;：http://jsfiddle.net/rathoreahsan/QfbUY/