title: Resize a div with position:relative pushes other divs
body: <p>I'm trying to resize a draggable div that holds an IMG and everytime I do it pushes the other div aside. If I change the position to absolute the div doesn't drag smoothly and jumps away from the mouse. </p>
  
  <pre><code>&lt;div id="div1" class="draggable"&gt;
  &lt;div class="resizable"&gt;
  &lt;img alt="".           src="https://upload.Wikipedia.org/wikipedia/commons/4/42/Smiley_icon.png" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="div2" class="draggable"&gt;
  &lt;div class="resizable"&gt;
  &lt;img alt=""      src="https://upload.Wikipedia.org/wikipedia/commons/4/42/Smiley_icon.png" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  .draggable{
  position:relative; 
  cursor:pointer;
  }
  .resizable{
  {
  width:100px;
  border:1px;
  }
  .resizable img {
  width:100%;
  }
  .ui-resizable-handle {
  background: #f5dc58;
  border:1px;
  width:5px;
  height:5px;
  z-index: 2;
  }
  .ui-resizable-se {
  right: -5px;
  bottom: -5px;
  }
  &lt;/style&gt;
  
  &lt;script&gt;
  $('.draggable').draggable();
  
  $('.resizable').resizable({
  aspectRatio:true,
  handles: 'ne, se, sw, nw'
  });
  
  &lt;/script&gt;
  </code></pre>