窗口加载时动态设置div位置坐标不生效该如何解决

架构老林

2026-9-30

问题核心原因

你没有给目标div设置非static的position属性，jQuery的offset()方法设置的坐标仅对position为relative/absolute/fixed的元素生效，默认static属性的元素会无视偏移设置，自然会堆叠在正常文档流位置。
你拼接的style样式字符串多了一个多余的闭合大括号，存在语法错误，导致你写的flex相关样式没有正常生效。
循环内重复创建style标签插入到head属于冗余操作，直接操作元素行内样式性能更高，也不会产生大量冗余的style节点。
order属性仅在父容器设置为flex布局时才会生效，如果你要同时用order调整顺序，需要先给这些div的共同父元素设置display: flex属性。

修改后的代码

function changeDivPosition (){
    // 请把.parent-container替换为你实际使用的div父容器选择器，保证order属性生效
    $('.parent-container').css({
        display: 'flex',
        flexWrap: 'wrap',
        gap: '10px' // 可按需调整元素间距
    })
    getNewPosts().then(data=>{
        for(var i=0;i<data.newPosts.length;i++) {
            const item = data.newPosts[i]
            const target = $('#'+item.id)
            // 核心修改：设置非static定位，让offset坐标生效
            target.css({
                position: 'relative',
                order: i
            })
            target.offset({top: item.yPosition, left: item.xPosition})
        }
    })
}