1

Firefox、およびおそらく他のブラウザでネストされたz-indexに問題があり、zindexが9000のaのdiv下にz-indexが30000labelのaがあります。これは30000zのdivが原因だと思いました。 -インデックスは2000s div-indexの中にありますが、これを削除しても効果はありませんでした。

この問題を引き起こす明らかなものはありますか？

<div class="field row olabel end_date">    
    <label for="cc_end_year" generated="true" class="error">* required</label>    
</div>

マークアップのさらに下に、テキストのロールオーバー時に表示/非表示になるポップアップメッセージがあります。

<div class="field row olabel">
   <div style="display:none;" class="whats_this_popup"></div>
</div>

私のCSS：

#order_form .row.end_date {
   position: relative;
   z-index: 9000;
}    
label.error {
   z-index: 9001;
}
.whats_this_popup {
   left: 360px;
   padding: 20px;
   position: absolute;
   width: 205px;
   z-index: 30000;
}
#order_form .row {
   width: 435px;
   z-index: 2000;
}
4

1 に答える 1

1

これは、コンテキストのスタックが原因で発生します。前者のdivのスタッキングコンテキストにはz-index9000があり、後者のスタッキングコンテキストにはz-index2000があります。

親内でのみ、ラベルに9001のz-indexを指定しています。z-indexは、親のスタッキングコンテキスト以外では意味がありません。同様に、に30000のz-indexを指定することにより、z-indexが30000未満の兄弟.whats_this_popupの前に表示され、z-indexが30000未満のページには何も表示されないことを意味します。

divを含む後者に30000のインデックスを与えると、望ましい結果が得られます。

于 2012-11-23T11:03:05.023 に答える