jQuery Resizable change other elements' positions

Question

I have 3 div inside one parent div , when you want to re-size the element for the first time , other elements' positions change , JSFIDDLE

here is my code :

HTML

<div class="parent">
<div class="element" >BOX1</div>
<div class="element" >BOX2</div>
<div class="element" >BOX3</div>
</div>

CSS

.parent { 
    width:300px;
    height:300px;
    background:#e0e0e0
}
.element {
    width:100px;
    height:20px;
    background:red;
}

JS

$(document).ready(function() {
    var x = 0;
    $('.element').each(function() {
        x++;
        $(this).draggable({
            containment: $('.parent')
        });
        $(this).resizable({
            containment: $('.parent')
        });
        $(this).css('left', x * 50);
        $(this).css('top', x * 50);
    });
});

JSFIDDLE

Answer 1

Your elements have a position:relative, meaning each time one of the boxes is changed, it becomes absolute and is 'taken out' of the flow of the page, so the other boxes move up to fill in the space left by it.

Changing the .element boxes to position:absolute; fixes this.

.element {
width:100px;
height:20px;
background:red;
position:absolute;
}

Example: http://jsfiddle.net/WRL8u/3/