Positioning jQuery dialog

I understand the answer is already accepted but just in case if any one need more info: http://salman-w.blogspot.co.uk/2013/05/jquery-ui-dialog-examples.html

$(function() {
            $("#dialog").dialog({
                position: {
                    my: "right bottom",
                    at: "right bottom",
                    of: window
                }
            });
        });

If you make your dialog box's position:absolute, then its taken about of the regular page flow, and you can use the left and top property to place it anywhere on the page.

$('.selector').dialog({ dialogClass: 'myPosition' });

and define the myPosition css class as:

.myPosition {
    position: absolute;
    right: 200px; /* use a length or percentage */
}

You can set the top, left, right, and bottom properties for myPosition using either a length such as in pixels or percentage.

This keeps dialog div in fixed position

this works for me in IE FF chrome and safari

jQuery("#dialogDiv").dialog({
    autoOpen: false, 
    draggable: true,
    resizable: false,
    height: 'auto',
    width: 500,
    modal: false,
    open: function(event, ui) {
        $(event.target).parent().css('position', 'fixed');
        $(event.target).parent().css('top', '5px');
        $(event.target).parent().css('left', '10px');
    }

});

when you want dialog box open just call

$('#dialogDiv').dialog('open');

Most of these answers seemed to be workarounds to me, and I wanted to find the official jQuery way to do it. After reading through the .position() docs, I found that it can indeed be done in the initialization of the jQuery widget:

$("#dialog").dialog({
    title:title,
    position:{my:"right top",at:"right+100 top+100", of:"body"},
    width:width,
    height:height
})

Where the +100 is the distance from the right and top respectively