算法从绝对变换为相对位置

Question

我有一些<div>元件，其被定位绝对的相对母体内：

我需要一个页面上显示这些场，在相同的位置，但也使用页面流。

例如，如果一个DIV被删除，它下面的人应该动起来：如果他们仍然拥有绝对位置

页面流不起作用。

是否有任何算法/ css技巧，我可以使用以显示在同一位置的div和也使用页面流？

---

JSFiddle Demo

代码：

HTML：

<div class="element" style="width: 300px; top: 10px; left: 0;"></div> 
<div class="element" style="width: 300px; top: 10px; left: 310px;"></div> 
<div class="element" style="width: 300px; top: 50px; left: 0;"></div> 
<div class="element" style="width: 300px; top: 50px; left: 310px;"></div> 
<div class="element" style="width: 610px; top: 90px; left: 0px;" id="elementToRemove"></div> 
<div class="element" style="width: 300px; top: 130px; left: 0;"></div> 
<button id="deleteButton" style="position: absolute; top: 170px;">Delete</button> 

JS：

$("#deleteButton").click(function() { 
    $("#elementToRemove").remove(); 
}); 

CSS：

.element { 
    position: absolute; 
    height: 30px; 
    background-color: #f0f0f0; 
} 

Answer 1

您需要更改top css属性才能向上或向下移动元素。

如果这个数字没有改变，那么什么都不会移动。

您可以根据删除的元素的高度来更改它。

所以你的情况，你可以做这样的事情：

$("#deleteButton").click(function() { 
    var removeElement = $("#elementToRemove"); 
    var nextElement = removeElement.next(); 
    nextElement.css('top', removeElement.css('top')); 
    removeElement.remove(); 
}); 

演示：http://jsfiddle.net/qwertynl/zLYeU/2/