JS pageX和pageY取坐标加相对位置div的边距?
问题描述:
我有我要居中一个div所以我用JS pageX和pageY取坐标加相对位置div的边距?
margin-left: auto;
margin-right: auto;
position: relative;
这是居中我承认最简单的方法,但是当我想用event.pageX和event.pageY需要坐标加上左利润率,这是错误的。
这是小提琴。点击绿色矩形某处观看结果:
任何想法如何解决这样展示广场上的坐标,而不左边距?
答
看看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
这是居中我承认最简单的方法,但是当我想用event.pageX和event.pageY需要坐标加上左边距,这就是错误的。我不明白这一点? – PraJen 2013-05-10 09:34:19
看看小提琴 – Bor 2013-05-10 09:39:27