Js Pagex And Pagey Take The Coordinate Plus The Margin Of Relative Position Div?

I have a div that I want to center so I use margin-left: auto; margin-right: auto; position: relative; That's the easiest way to center I admit, but when I want to use event.page

Solution 1:

Take a look at the updated fiddle.

Quick solution remove positioning of canvas:

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

The problem is with the positioning of template. Because absolute is still "relative".

The definition of absolute positioning: An absolute position element is positioned relative to the first parent element that has a position other than static.

Therefore the position of #template will take into consideration the position of #canvasDiv unless you leave #canvasDiv with the default static positioning.

Learn more about positioning at w3schools

Positioning absolutely elements inside relatively positioned elements: here

Great example of your problem tabs 3 & 4.

Should you wish to stick with the relative positioning of canvasDiv, you have to update the script, so it takes into account the positioning of canvasDiv:

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

Check out the fiddle