CSS定位问题

Question

我正在使用melonJS创建游戏。我想在NPC上动态定位对话框。

在全屏幕中，它看起来很好。

当缩小视口时，定位保持绝对，因此看起来很糟糕。但如果我没有绝对定位，我将无法将其放置在相对于NPC坐标的位置：

$("#dialogBox").css({top: game.data.currentNPC_y+50, left: game.data.currentNPC_x-50, position:'absolute'});

有什么方法吗？

---

修改

当我使用以下代码时，代码不会像上面提到的那样扩展，但至少它仍然靠近NPC和画布：

        $("#dialogBox").css({
            top: game.data.currNPC_y+50, 
            left: game.data.currNPC_x-50, 
            position:'absolute'
        }); 

当我使用您建议的代码时，它出现在画布外：

        $("#dialogBox").css({
            position : "absolute",
            left     : (game.data.currentNPC_x - 50) * me.sys.scale.x,
            top      : (game.data.currentNPC_y - 500) * me.sys.scale.y
        });

Answer 1

将DOM绝对左侧缩放me.sys.scale.x，绝对顶部缩放me.sys.scale.y：

$("#dialogBox").css({
    "position" : "absolute",
    "left"     : (game.data.currentNPC_x - 50) * me.sys.scale.x,
    "top"      : (game.data.currentNPC_y + 50) * me.sys.scale.y
});

您也可以缩放元素的宽度和高度，以便更好地集成。

最后，您应该听取WINDOW_ONRESIZE事件，以便在用户更改窗口大小或移动设备方向等时动态重新缩放元素。