css - オーバーレイz-indexを制限するJQueryUI

Question

モーダルダイアログであるjQueryUIにダイアログがあります。

$("#mydialog").dialog({modal:true});

オーバーレイの上に配置したい別のdivがありますが、このdivはダイアログの前に作成され、他のモーダルダイアログも表示される場合があります。

私が欲しいのは、基本的にそのdivの「常にトップ」のようなものです。

このjsfiddleはそれをよりよく説明します。

Answer 1

divに追加する必要があるposition: relativeので、通常のページフローから抜け出し、z-indexプロパティを尊重します。更新されたフィドルを参照してください。

#mydiv {
    z-index: 1500;
    width: 100px;
    height: 100px;
    background:white;
    float:right;
    position:relative;
}

理論的根拠：z-indexプロパティは配置された要素にのみ影響するため、次のいずれかが必要です。

position: relative;
position: absolute;
position: fixed;