If I create a div tag with red color filled in at 300 x 300 pixels, I want to make it so that the coordinate system is 0,0 at the corner of the div tag instead of page. So regardless of where the div tag is positioned, the top left corner of that div tag is always 0,0.

If possible, it would be great if scrolling could be taken into account such that if I scroll down a bit, i can still click on the top left corner of the div and it would still know that it is the 0,0.

It would involve something like: event.clientX and event.clientY or maybe there is a better method to acplish this.

If I create a div tag with red color filled in at 300 x 300 pixels, I want to make it so that the coordinate system is 0,0 at the corner of the div tag instead of page. So regardless of where the div tag is positioned, the top left corner of that div tag is always 0,0.

If possible, it would be great if scrolling could be taken into account such that if I scroll down a bit, i can still click on the top left corner of the div and it would still know that it is the 0,0.

It would involve something like: event.clientX and event.clientY or maybe there is a better method to acplish this.

• javascript
• html

• Can you not make the 300x300 div wrap all of your content and position all of the children using relative? – Doug Stephen Commented May 18, 2011 at 14:38
• The concept I would like to apply to table as well, like: if I had two rows in a table, and i made the first row a height of 30pixels. The second row contains the div. I want to be able to mouseover/click the top left corner of the row and have it be 0,0. The method to do this I think involves attaching the mouse event listener to the div, but im not sure what the syntax would be. – Reviera Commented May 18, 2011 at 14:39
• The answer to this question might help you. – Jeremy Commented May 18, 2011 at 14:40

1 Answer 1

Are you meaning to do something like the following?

<div style="position: fixed; top: 0px; left: 0px; width: 300px; height: 300px;">
</div>