目的が不明ですので概要だけ。たとえばfirefoxならば開発ツールのインスペクタなどでみるとわかりますが、jquery-uiでダイアログを作成すると、ダイアログの実体である以下のようなDOMがbody要素の一番最後に追加されます。
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" ...>
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" ...>
...略...
</div>
</div>
最後に追加されるということは、z-indexは特別な指定がなくとも内部的に最大ですから、どの要素よりも上にレンダリングされます。また、ダイアログを生成した順で重なってレンダリングされることでしょう。これが通常の動作で、ふつうはこれで十分です。
しかしajaxなどでさらにbodyの最後尾に追加された要素が描画される場合、内部的にz-indexがダイアログよりも大きくなります。あるいは、明示的にCSSなどでz-indexが指定された要素があるばあい、その値がダイアログのz-indexより大きければ、もちろんダイアログが隠れてしまいます。
こういった状況を考慮して、ダイアログがいかなる状況でも手前にくるためには、事実上到達不可能な大きなz-indexを設定しておくことがひとつ挙げられ、これをするためのクラスとして.ui-front
が用意されている、ということでしょう。
.ui-front { z-index: 99999999; /* めちゃでかい値 */ }
http://jsfiddle.net/ht1foyo8/
こちらにサンプルを用意してみました。最初は.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なので気にしないでいいでしょう。
以上、質問の趣旨に合っていない、あるいは私の理解がそもそも誤っていたら申し訳ありません。