How to get div to float over jQuery UI dialog box?

Question

I have a jQuery dialog box with a form, and I would like the autocomplete window attached to one of the form elements to float above the dialog box (so if the list goes outside the dialog box, it will not be disabled). I have the following CSS elements applied to an autocomplete div:

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

It will still create a scrollbar in the dialog box. What a deal? I see the z-index dialog box: 1004; so I don’t know why mine don’t go forward. Is that what I'm trying to make even possible?

Answer 1

, , , . z-index , . .

Answer 2

, , - :

"ui-dialog" jquery ui css overflow:visible, , , , :

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

, , ( ) 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");