I want to move a div by changing the left and top css elements to where it was clicked… it works fine when I get the X and Y positions but with the following situations:

• Target DIV is outside the content div, it goes to the correct position but it acts like “fixed” div when I scroll up/down because the content around is not relative
• If I add it to the content div which is relative, it doesn’t go to the correct position and it keeps changing every time I scroll up/down

I am using Angular, I get the mouse clicked position by using pageX and pageY and assign it to the my target div:

target.style.left = pageX-100+ "px";
target.style.top = pageY +10+"px";

Somehow I have to get the parent div position or height to calculate where to put the absolute target… just can’t figure out what formula I have to apply to make sure if always open in the correct position if I scroll up/down.

I’ve seen so many simple examples but because of the position of my target.. I am failing on the results I’m looking for. Any idea?

I checked other questions here on Stackoverflow but I can’t figure out why when I add it under relative parent it keeps going to a totally different position when I scroll up/down.