Dialog has wrong position in form

Dialog has wrong position in form

Hi,

I have a problem with dialog which is using inside a form. I want to make my dialog inside a div (which is parent for the form) attached to the left top border. Dialog must be looked not like a modal form 

Example of html:
    $(function () {
        $.fx.speeds._default = 1000;
        $("#dialog").dialog({
            modal: false,
            draggable: false,
            autoOpen: false,
            resizable: false,
            width: 300,
            height: 200,
            position: { my: "left", at: "top", of: "#my_div" },
            buttons: {
                "DoIt": function () {
                    if (jQuery("#myform").valid()) {
                        ...
                    }
                    else {
                        ...
                    }                    
},},
            close: function () {
            },
            open: function () {
                $(this).parent().appendTo($('#myform'));
            },
            create: function (event, ui) {
                $(".ui-widget-header").hide();
                $(this).parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
                $(this).parent(".ui-widget-content").css("padding", "0");
                $(this).parents(".ui-dialog").css("border", "0 none");                
            },
        });

        $("#dialog").dialog("open");
    });

.....
 <div id="my_div" style="border: 5px solid red;width:600px;height:100px;">
      <form id='myform' style="border:2px solid blue;">
            <div id="dialog" title="Basic dialog">
            ....
            </div>
      </form>
</div>

Do you have any ideas?

Thx in advance!