divをjQueryのUIダイアログの上に浮かせるには？

Question

私はフォームを持つjQueryダイアログボックスを持っていて、フォーム要素の1つに添付されたオートコンプリートボックスをダイアログボックスの上に浮かべたいと思います（リストがダイアログボックスの終わりを超えた場合、駄目だ）。オートコンプリートdivに次のCSS要素が適用されています。

background:none repeat scroll 0 0 white; 
float:left; 
position:absolute; 
z-index:9999; 

ダイアログボックスにスクロールバーが作成されます。どうしたんだ？ダイアログボックスがZ-index：1004であることがわかります。私はなぜ私のものがそれの上にないのかわかりません。私は可能な限り達成しようとしていますか？

Answer 1

その理由は、要素がダイアログのコンテナの子であるためです。 z-indexはあなたが望むことをしません。この要素はダイアログの外にある必要があり、それに応じて配置する必要があります。

Answer 2

私はこの記事が古いですけど、あなたはこのような何かを行うことができます。

のどちらかがoverflow:visibleを持つようにjqueryのUIのCSSファイルで、「UI-ダイアログ」クラスを設定するか、またはあなたのダイアログがクリックで開く場合ボタンの、例えば、このような何かを：

$("mybutton").click(function() { 
    $("mydialog").dialog(); 
    $(".ui-dialog").css("overflow", "visible"); 
}); 

すべてのあなたのダイアログをしたくない場合は、2番目のことを行う、これがあればoverflow:visible

Answer 3

わからない持っている（あなたはもっと持っている場合）あなたは何をしようとしていたのですか？私はダイアログウィンドウにdivを追加し、内容をオーバーレイしました：

.dialogWindowLoading { 
z-index:99999; 
background:rgba(0,0,0,0.8);; 
width:100%; 
height:100%; 
position:absolute; 
top:0; 
left:0; 
} 

$("#dialogWindow").dialog({ 
     autoOpen: false, 
     resizable: false, 
     draggable: false, 
     modal: true, 
     position: { my: 'center', at: 'center' }, 
     heigth: 425, 
     width: 400, 
     title: "dialog window", 
     open: function (event, ui) { 
       $("#dialogWindow").append(" 
       <div id='dialogWindowLoading'><span>dialog window overlay</span></div>");  
      } 
     }).parent().appendTo("form:first");