JS pageX和pageY取坐标加相对位置div的边距？

我有我要居中一个div所以我用JS pageX和pageY取坐标加相对位置div的边距？

margin-left: auto; 
margin-right: auto; 
position: relative;

这是居中我承认最简单的方法，但是当我想用event.pageX和event.pageY需要坐标加上左利润率，这是错误的。

这是小提琴。点击绿色矩形某处观看结果：

http://jsfiddle.net/FGkUq/

任何想法如何解决这样展示广场上的坐标，而不左边距？

来源

2013-05-10 Bor

这是居中我承认最简单的方法，但是当我想用event.pageX和event.pageY需要坐标加上左边距，这就是错误的。我不明白这一点？ – PraJen 2013-05-10 09:34:19

看看小提琴 – Bor 2013-05-10 09:39:27

看看updated fiddle。帆布的

快速除去溶液中的定位：

#canvasDiv { 
    width: 30%; 
    height: 400px; 
    cursor:crosshair; 
    background-color: #458B00; 
    /* position: relative; */ 
    ... 
}

问题是与模板的定位。因为absolute仍然是“相对的”。

绝对定位的定义：绝对位置元素相对于具有非静态位置的第一个父元素进行定位。

因此，除非你离开#canvasDiv使用默认static定位#template位置会考虑的#canvasDiv位置。

了解在w3schools

更多关于定位

内定位相对定位元素绝对要素：here

大example of your problem标签3 & 4.

如果你想坚持的canvasDiv的相对位置，您必须更新脚本，因此它考虑到canvasDiv的位置：

var x = event.pageX; 
var y = event.pageY; 
var canvasPos = $(this).offset(); // in the context of your script this refers to #canvasDiv 
var styles = { 
    "left" : x - canvasPos.left, // remove its left offset 
    "top" : y - canvasPos.top // remove its top offset 
};

时退房fiddle

来源

2013-05-10 09:34:49 Matyas

是的，但在示例链接中，主（父母）div的位置是：relative。这是可能的吗？ – Bor 2013-05-10 09:46:55

您可以使用'canvas'的相对位置，但脚本也必须知道它。（查看更新后的答案） – Matyas 2013-05-10 09:51:20

JS pageX和pageY取坐标加相对位置div的边距？

回答

相关问题