Javascript 从绝对位置到相对位置的转换算法

我有一些元素位于相对父对象内的绝对位置：

我需要在页面上以相同的位置显示这些字段，但也要使用页面流

例如，如果删除了一个div，则它下面的div应该向上移动：

如果页面流仍然具有绝对位置，则页面流不起作用

是否有任何算法/css技巧可以用于在相同位置显示div，并使用页面流

代码：

HTML:

CSS:

为了上下移动元素，您需要更改top css属性

如果这个数字不变，那么什么也不会移动

可以根据已删除图元的高度对其进行更改

因此，在您的情况下，您可以这样做：

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

---

演示：

为什么它们在相对父对象中处于绝对位置？有什么特别的原因吗？@Gotschi它们是绝对的，因为我可以把它们拖到我想移动的地方designer@samitha：我添加了一个JSFIDLE链接您如何实现拖放功能？jquery或原生html5或…？您需要自动移动其他元素，对吗？我知道，不幸的是，创建一个检测以下所有元素并将其向上移动的算法很复杂，我希望找到更好的解决方案jquery next获取DOM中的下一个元素，而不是下面的元素。而且，对于下面的所有元素，这需要递归地发生

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

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

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