如何让fixed定位元素随absolute定位的可拖动容器同步移动？

你有一个position: absolute的可拖动容器，内部包含多个position: fixed的可拖动元素，需要实现拖动容器时内部元素同步跟随移动，且无法使用relative定位。

可行解决方案 #

核心逻辑是监听容器的拖动事件，计算容器的位移差，手动更新每个fixed元素的定位值——因为fixed定位基于视口，不会自动继承容器的位移，必须通过脚本主动同步。

基于你使用的jQuery UI Draggable，实现代码如下：

// 给容器绑定拖动事件，实时同步内部元素位置
$('.area.draggable').draggable({
    drag: function(event, ui) {
        // 计算容器拖动的横向/纵向位移差
        const deltaX = ui.position.left - ui.originalPosition.left;
        const deltaY = ui.position.top - ui.originalPosition.top;
        
        // 遍历所有内部fixed元素，更新定位
        $(this).find('.toolbar-item').each(function() {
            const currentTop = parseFloat($(this).css('top'));
            const currentLeft = parseFloat($(this).css('left'));
            
            $(this).css({
                top: `${currentTop + deltaY}px`,
                left: `${currentLeft + deltaX}px`
            });
        });
    }
});

补充说明 #

• 如果不需要实时同步，希望拖动结束后再更新位置，可以把逻辑从drag事件切换到stop事件，减少实时计算的开销。
• 确保内部元素的top和left样式是带px单位的数值，否则parseFloat会无法正确解析。
• 若内部元素本身也支持拖动，这段逻辑不会影响它们的独立拖动行为——因为容器拖动时的位移是叠加到元素当前位置上的。

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