jQuery可调整大小改变其他元素位置

Question

我是一位有用的助手，可以为您进行文本翻译。

我有一个父div里面包含3个子div，当您第一次调整元素大小时，其他元素的位置会改变， JSFIDDLE

以下是我的代码：

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

- Mironline

Answer 1

您的元素具有position:relative，这意味着每次更改其中一个框时，它都会变为绝对定位，并且被“取出”页面流，因此其他框会向上移动以填补其留下的空间。

将.element框更改为position:absolute;可以解决此问题。

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

示例：http://jsfiddle.net/WRL8u/3/

- Death