Javascript 在单击点将div浮动到画布上方的代码

我有一个HTML5画布元素和一个用于单击的事件侦听器，我需要的是将其链接到一个浮动div，该div显示在用户在画布上单击的位置。关于实现此目的的最佳方法的代码建议

我正在使用以下工具跟踪鼠标位置：

        var pos = getMousePos(canvas, evt);
        mousePos.x = pos.x;
        mousePos.y = pos.y;

---

这应该可以做到：

HTML:

<div style="position: relative">
    <canvas />
    <div style="position: absolute" id="floatingDiv">Floating div</div>
</div>

var pos = getMousePos(canvas, evt);
mousePos.x = pos.x;
mousePos.y = pos.y;
var floatingDiv = document.getElementById('floatingDiv');
floatingDiv.style.top = pos.y + 'px';
floatingDiv.style.left = pos.x + 'px';

---

关闭，但不太适合我（在Firefox或chrome中）。主画布位于页面中央，div最终相对于页面左上角放置，而不是相对于画布。将浮动div中的“position:absolute”更改为“position:relative”会将其放置在画布下方。您不应该将画布居中，而应该将相对定位元素居中。@Sander：如果您是指包含的div，我就是这么做的。请尝试将画布的左偏移量添加到pox.x中，或者使用www.jsfiddle.net创建一个示例