Angular 17: select correct ElementRef of children component on mouseover event

Question

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

Answer 1

Add position: relative; to .table-area. This is because the element with position: absolute is positioned relative to its closest positioned (not static) ancestor.