Dialog uses position:absolute

It's CSS, change your stylesheet.

It's in the style attribute of the <div> created by the jQuery UI. I tried to change my CSS but it didn't work.

The code generated for Dialog with jQuery UI:

<div style="outline-width: 0px; outline-style: initial; outline-color: initial; height: auto; width: 500px; position: absolute; top: 361px; left: 139px; display: block; z-index: 1002; " class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">
  <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span class="ui-dialog-title" id="ui-dialog-title-1">Detalhes e ações da carta <q>Encolher</q></span>
    <a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">fechar</span></a>
  </div>
  <div class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 200px; height: auto; ">
    <div class="card card1"><img src="http://localhost/artorian/include/image/cover.png" alt="Artorian"></div>
    <p id="card_dialog">Aguarde…</p></div><div class="ui-resizable-handle ui-resizable-n"></div>
    <div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-w"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001; "></div>
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002; "></div>
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003; "></div>
    <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004; "></div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
      <div class="ui-dialog-buttonset">
        <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button>
      </div>
    </div>
  </div>

That's a bug in resizable.

I set the option "resizable" = false and still I get the same problem.

Works fine for me: http://jsbin.com/uqame3/edit