CSSの奇妙なZインデックスの動作

Question

ページのいくつかの要素でz-indexを使用しようとしています。基本的には、私はウェイターとレスポンスボックスとのコンタクトフォームを持っています。連絡先フォームは、別の場所のページで使用されています。

送信ボタンを押してフォームをカバーすると、ajaxレスポンスはオーバーレイ-1をカバーする感謝のボックスを表示します

これは、ページ上に相対的に配置されているフォームの場合は、すべて正常に動作します。しかし、私はすべてのものの上にポップアップする全く同じフォームを持っていますが、フォームが同じクラスを使用していても私のZ-インデックスは尊重されません。

誰でも私に任意のポインタを教えてもらえますか？

アレックス

HTML：

<div id="popuporderform" class="orderform"> 
    <!-- .resultBox injected here --> 
    <form method="post"> 
     <input name="name" type="text" /> 
     <input class="send" type="submit" value="Send" /> 
    </form> 

</div> 
<!-- .orderspinner injected here --> 

CSS：

FIXED

/* -- ORDER FORM -- */ 
div.orderform { 
    width: 220px; 
    background-color: #fff; 
    height: 300px; 
} 

// This ID is for the pop up version of the form and is not used in the 
// form that is within the layout of the page 
#popuporderform {   
    position: absolute; 
    top: 100px; 
    left: 100px; 
    z-index: 200; 
} 

// this is the overlay with spinner in it -- this DOES overlay the form 
.orderspinner { 
    position: absolute; 
    opacity: 0.9; 
    filter: alpha(opacity=90); 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); 
    z-index: 250; 
    background: #fff; 
} 

// This is the thank-you box - it should appear over the .orderspinner (but isn't) 
.resultBox { 
    display: block; 
    width: 150px; 
    height: 100px; 
    background-color: #fff; 
    position: absolute; 
    z-index: 300; 
    border: 1px red solid; 
    color: #000; 
} 

：

私はdiv要素の中にではなく、それはので、同じにそれを入れて外にオーバーレイを注入しZインデックスのコンテキスト

HTML：

<div id="popuporderform" class="orderform"> 
    <!-- .orderspinner injected here --> 
    <!-- .resultBox injected here --> 
    <form method="post"> 
     <input name="name" type="text" /> 
     <input class="send" type="submit" value="Send" /> 
    </form> 

</div> 

Answer 1

私はしばらく前にこの問題を抱えていました。私の問題は、スタック・コンテキストに接続されていることが判明しました。基本的にZ-索引を持つ要素がある場合、その中に新しいスタック・コンテキストを開始します。つまり、要素のZ-索引と要素のZ-索引外側。 物事が複雑になるのは、要素が配置されている（絶対、相対）ときに、IE 6-7（私は8についてはわかりません）が新しいスタッキングコンテキストを開始することです。 私はあなたのポップアップの要素をルートまで調べて、高いzインデックスを与え、それが修正されているかどうかを確認します。試行錯誤の少しであなたはおそらく問題を見つけることができます。

Answer 2

は、バックグラウンドの使用のzインデックスにことになっているコードをしていますか？あなたが他のコンポーネントと競合しているかどうかを知るために、z-indexを馬鹿げた大きな値に変更しようとしましたか？

他にも盲目的に考えるのは難しいです。