I am constructing draggable and resizable elements in a circumscribed area. When I hover these elements I dynamically apply sensitive dots (red squares) over them so that I can also perform resizing. The problem is that on mouseover the correct element reference is the entire dom and not the specific element. To better understand the problem try the test on stackblitz and look at the behavior of the red squares on mouseover and after dragging container start when they are correctly positioned.
https://stackblitz.com/edit/stackblitz-starters-igouxy
Add
position: relative;to.table-area. This is because the element withposition: absoluteis positioned relative to its closest positioned (not static) ancestor.