我有一个要居中的 div,所以我使用
margin-left: auto;
margin-right: auto;
position: relative;
我承认这是最简单的居中方式,但是当我想使用 event.pageX 和 event.pageY 时,它需要坐标加上左边距,这是错误的。
这是 fiddle 。单击绿色矩形上的某处以查看结果:
任何想法如何解决以显示正方形到没有左边距的坐标?
最佳答案
看看 updated fiddle .
快速解决方案删除 Canvas 的定位:
#canvasDiv {
width: 30%;
height: 400px;
cursor:crosshair;
background-color: #458B00;
/* position: relative; */
...
}
问题出在模板的定位上。因为 absolute
仍然是“相对的”。
绝对定位的定义:绝对定位元素是相对于第一个非静态定位的父元素定位的。
因此 #template
的位置将考虑 #canvasDiv
的位置,除非您将 #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
关于javascript - JS pageX和pageY取坐标加上相对位置div的margin?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16479179/