質問: jQueryUI DialogのAPIには、かつて`zIndex`オプションがありましたが、現在はありません。 そこで、代替手段は無いのだろうかと調べた所、下記のページを見つけました。 どうやら`ui-front`クラスを介して`z-index`の制御ができるようなことを書いてあると思うのですが、私は英語が苦手であるため、いまいち内容を理解できません。 このページでは、どのようなことが解説されているのでしょうか?
回答: 目的が不明ですので概要だけ。たとえばfirefoxならば開発ツールのインスペクタなどでみるとわかりますが、jquery-uiでダイアログを作成すると、ダイアログの実体である以下のようなDOMがbody要素の一番最後に追加されます。 ``` ...略... ``` 最後に追加されるということは、z-indexは特別な指定がなくとも内部的に最大ですから、どの要素よりも上にレンダリングされます。また、ダイアログを生成した順で重なってレンダリングされることでしょう。これが通常の動作で、ふつうはこれで十分です。 しかしajaxなどでさらにbodyの最後尾に追加された要素が描画される場合、内部的にz-indexがダイアログよりも大きくなります。あるいは、明示的にCSSなどでz-indexが指定された要素があるばあい、その値がダイアログのz-indexより大きければ、もちろんダイアログが隠れてしまいます。 こういった状況を考慮して、ダイアログがいかなる状況でも手前にくるためには、事実上到達不可能な大きなz-indexを設定しておくことがひとつ挙げられ、これをするためのクラスとして`.ui-front`が用意されている、ということでしょう。 ``` .ui-front { z-index: 99999999; /* めちゃでかい値 */ } ``` こちらにサンプルを用意してみました。最初は`.ui-front`のCSSルールがコメントアウトされているので、ダイアログよりも上に要素が表示されますが、コメントを解除すればダイアログが上になるはずです。 > > Note: When using ui-front, you must also set position to relative, absolute or fixed in order for the z-index to be applied. > > > 注意としては、z-indexが有効となるために、対象要素の`position`CSSプロパティが`static`以外になっている必要がある、とありますが、少なくともdialogではabsoluteなので気にしないでいいでしょう。 以上、質問の趣旨に合っていない、あるいは私の理解がそもそも誤っていたら申し訳ありません。