Dialog- elements with "absolute" positioning overflow!

Dialog- elements with "absolute" positioning overflow!

How come when I make a button that's "absolute" position, My dialog overflows and I get the vertical scroll bar if I move the button out of place? I thought it would re size the height accordingly but it doesn't.

  1. <script type="text/javascript" language="javascript">
            $(document).ready(function(){
                $("#ui-information-dialog").dialog({
                    width: 'auto',
                    //autoResize: 'auto'
                });
               
                $("button").button();
            });
        </script>









  3. <div>
            <button id ="ui-save-button"> save </button>
  4. </div>
and in my stylesheet

  1. #ui-save-button
    {
        position: absolute;
    }




What happens, is if I change the top, left property of that button, the dialog won't resize accordingly.