算法從絕對變換爲相對位置

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/