如何将编辑器所有子元素设为绝对定位且保留原始位置？

核心前提：必须先给#editor容器设置position: relative，否则绝对定位的元素会以整个文档为基准，无法保持原有布局位置。

jQuery 实现方案 #

修改prepareDocument函数，添加定位逻辑：

function prepareDocument() {
    // 给编辑器容器设置相对定位，作为绝对定位元素的基准
    $("#editor").css('position', 'relative');

    $("#editor").find("*").each(function () {
        $(this).attr('contenteditable', true);
        
        // 获取元素相对于父容器的原始位置与尺寸
        const pos = $(this).position();
        const width = $(this).width();
        const height = $(this).height();
        
        // 应用绝对定位并还原原始布局
        $(this).css({
            position: 'absolute',
            top: `${pos.top}px`,
            left: `${pos.left}px`,
            width: `${width}px`,
            height: `${height}px`,
            margin: 0 // 清除默认外边距，避免位置偏移
        });
    });

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

    disableDragGlobally();
}

原生 JavaScript 实现方案 #

无需依赖jQuery的版本：

function prepareDocument() {
    const editor = document.getElementById('editor');
    // 设置编辑器容器为相对定位
    editor.style.position = 'relative';

    const allElements = editor.querySelectorAll('*');
    allElements.forEach(el => {
        el.contentEditable = true;
        
        // 计算元素相对于编辑器容器的偏移量
        const editorRect = editor.getBoundingClientRect();
        const elRect = el.getBoundingClientRect();
        
        const top = elRect.top - editorRect.top;
        const left = elRect.left - editorRect.left;
        const width = elRect.width;
        const height = elRect.height;
        
        // 应用绝对定位
        el.style.position = 'absolute';
        el.style.top = `${top}px`;
        el.style.left = `${left}px`;
        el.style.width = `${width}px`;
        el.style.height = `${height}px`;
        el.style.margin = '0';
    });

    const imgs = editor.querySelectorAll('img');
    function handleImageEvent(event) {
        event.preventDefault();
        event.stopPropagation();
        event.target.focus();
    }
    imgs.forEach(img => {
        img.addEventListener('dblclick', handleImageEvent);
        img.addEventListener('mousedown', handleImageEvent);
        img.addEventListener('mouseup', handleImageEvent);
    });

    disableDragGlobally();
}

关键说明 #

• 直接设置position: absolute无效的原因：未给父容器设置position: relative，导致元素相对于文档而非编辑器定位；同时未显式固定top/left和尺寸，元素脱离文档流后位置错乱。
• 固定width/height是为了保证元素尺寸与转换后的HTML一致，避免编辑时布局坍塌。
• 清除margin是为了抵消部分元素默认的外边距，确保位置完全匹配原始布局。

内容的提问来源于stack exchange，提问作者Clueless