使用position调整div的大小：relative推送其他div

Question

我正在尝试调整一个持有IMG的可拖动div的大小，每次我这样做都会将另一个div推到一边。如果我将位置更改为绝对值，则div不会平滑拖动并跳离鼠标。

<div id="div1" class="draggable">
<div class="resizable">
<img alt="".           src="https://upload.Wikipedia.org/wikipedia/commons/4/42/Smiley_icon.png" />
</div>
</div>

<div id="div2" class="draggable">
<div class="resizable">
<img alt=""      src="https://upload.Wikipedia.org/wikipedia/commons/4/42/Smiley_icon.png" />
</div>
</div>

<style>
.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;
}
</style>

<script>
$('.draggable').draggable();

$('.resizable').resizable({
aspectRatio:true,
handles: 'ne, se, sw, nw'
});

</script>