While I was working with a JQuery UI dialog today I noticed that some of the absolutely positioned layers on my page would overlap with a JQuery UI dialog when dragging the dialog object across the form. This broke the basic movement option of the dialog and would be unacceptable for users of the Web page.
The reason for the overlap was that the z-index of some layers on the page were at a higher index level than the default index level of the dialog. This led me to ask the question: what exactly is the default z-index of an unmodified JQuery UI dialog?
What is the Default Z-Index of a JQuery UI Dialog
Update: Since I first wrote this article the programmers of the JQuery UI Dialog have updated the z-index of their widgets and deprecated the original methods for setting the z-index.
While in older versions of JQuery the z-index was 1002, it is now set to 100. I expect this will change again in future, but as of JQuery UI 1.10.2 the z-index is 100.
How to Change the Z-Index of a JQuery UI Dialog
The default z-index setting is useful information to know while coding and planning a page layout. If layers on your page will exceed the z-index of 1002 (100 in 1.10.2) then you will need to programmatically set your JQuery UI dialog to run at a higher z-index. If you skip this step then your dialog will not be properly drag-able which could frustrate users of your site.
Pre JQuery UI 1.10, you could update your z-index position as follows:
To adjust the z-index of your JQuery UI dialog you can use JQuery code like the following example:
$('#element').dialog({zIndex: 3999});
Alternately you can use CSS to set the Dialog’s z-index using the following syntax:
.ui-datepicker { z-index: 9999 !important; }
JQuery UI 1.10 and Above
UPDATE: As of JQuery 1.10, the zIndex can no longer be set in the same manner. This is explained in the JQuery 1.10 documentation . To properly work with CSS positioning, you can either code the position in your CSS, or you can change the CSS z-index in JQuery in the dialog open event. Please see this article for working example code for either of these two methods.
Justin Cooney 
The jQuery dialog option for z-index was removed on version 1.10. That’s all I know.
Doesn’t work anymore — redacted feature. Cant even get it to work using your CSS example.
JQuery1.10.3 Have been trying to find solution for hours. Ideal for drag drop to keep dragged item on top of all others.
Interesting, thanks for the heads up. When I tested updating the CSS z-index using JQuery, IE 10 threw errors and no longer worked, but Chrome 30.0 still interpreted the script correctly. Might be something to do with IE 10’s handling of the DOM, which has been causing lots of problems so far.
In both browsers I can still set the styling directly in the CSS, but it would definitely be important to have browser-independent script-based access.
The issue with IE 10 turned out to be caused by quirks mode. With the correct meta tag, I have checked both versions of my script at this article, which should work well for you.
how jquery handles multiple modal dialogs with same z-index. how doest it know which dialog should be shown in the front