如何将所有子元素（及其子元素）的位置更改为绝对位置，同时仍保留其原始位置？

Question

我正在开发某种文档编辑器，基本上

用户上传 PDF => 服务器转换为 html => 前端将 html 渲染到编辑器 => 用户编辑 => 服务器将 html 转换回 pdf

问题是，当用户更改大小/删除 #editor div 中的元素时，该元素下方的元素会被推高。

所以我想将所有元素更改为绝对元素，同时仍保持其位置

function prepareDocument() {
    $("#editor").find("*").each(function () {
        $(this).attr('contenteditable', true);
        // Make $(this) absolute while keeping original positioning
    });

    $('#editor').find('img').on('dblclick mousedown mouseup', function (event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).focus();
    });

    disableDragGlobally();
}

任何帮助将不胜感激！可以是 jQuery 或 vanila js

尝试直接更改为绝对或尝试使用偏移进行播放，但没有帮助

Answer 1

如果偏移不起作用，我不完全确定如何解决该问题，也许改变方向并尝试使用 css 网格并在渲染 html 时为每个元素设置列/行属性。