Алгоритм преобразования из Абсолюта в Относительную позицию

У меня есть некоторые элементы <div> которые расположены внутри относительного родителя:

Мне нужно отобразить эти поля на странице, в том же положении, но также использовать поток страниц.

Например, если один div удаляется, те, которые ниже него, должны двигаться вверх:

Поток страниц не работает, если они все еще имеют абсолютное положение.

Существуют ли какие-либо алгоритмы/css-трюки, которые я могу использовать, чтобы отображать divs в том же положении, а также использовать поток страниц?

---

Демо-версия JSFiddle

Код:

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;
}