Get top left corner coordinates of `<div>`

As part of a project I need to calculate relative coordinated of a mouse click inside an image shown on screen.

As the size of the screen is not constant, I need to calculate relative coordinates, as opposed to the absolute, i.e. not the ones from the top left corner, but the ones from the top left corner of the <div> I place the image in.

My intuition is that I need to get the top-left corner C(x, y) of the component, and calculate the point

p(x, y) = (x - X, y - Y), where X = C(x) and Y = C(y).

For this matter I saw that I can bind a property called contentRect, but I can't find proper example as how to use it.

For now I only managed to get the height and width of the component, but not the top left corner

I saw How to get coordinates of upper left corner of a div, but is it possible to use bind:property inside the <img/> to update the shape of the image and get its top left corner, as the code in the question mentioned seems too complicated.

My code is below:

<script>
    let width: number = 0;
    let height: number = 0;
    let C_x = 0;
    let C_y = 0;
    let mousePosition = {x: 0, y: 0};
    function handleMousemove(event: any){
        mousePosition.x = event.clientX - C_x;
        mousePosition.y = event.clientY - C_y;
    }
</script>
<main>
        {#each [images[currentSlideItem]] as image, index}
            <div
                bind:clientWidth={width}
                bind:clientHeight={height}
                >
                {width}, {height}
                <img 
                    transition:slide="{{delay:200}}" 
                    src={image} 
                    alt='Blank' 
                    width="1080"
                    on:click|preventDefault={(e)=>handleMousemove(e)}
                />
            </div>

        {/each}
        <div>The mouse position is ({mousePosition.x}, {mousePosition.y})</div>
        <div class="carousel-buttons">
            <button id="play" on:click={() => play()}>&#9199</button>
            <button id="pause" on:click={() => pause()}>&#9208</button>
            <button id="prev" on:click={() => prevImage()}>&#9194</button>
            <button id="next" on:click={() => nextImage()}>&#9193</button>
        </div>
</main>

This is showing two pictures, with their position:

<img class="example1" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
<br>.....

<img class="example2" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />


<script>
i = document.getElementsByClassName("example1")[0].getBoundingClientRect();
document.write("<br>Example1: ");
document.write(" top: " + i.top);
document.write(" left: " + i.left);
document.write("<br>");

i = document.getElementsByClassName("example2")[0].getBoundingClientRect();
document.write("<br>Example2: ");
document.write(" top: " + i.top);
document.write(" left: " + i.left);

</script>

BTW: The idea was found here: Retrieve the position (X,Y) of an HTML element and/or How to get coordinates of upper left corner of a div