从绝对位置转换为相对位置的算法

Question

我有一些<div>个元素，它们位于相对父级内的绝对位置：

我需要在页面上，在相同位置显示这些字段，还要使用页面流。

例如，如果一个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/