The position of the elements do not remain the same compared to their previous placed position using getBoundingClientRect

I drag and drop some elements on a div(containing background image) and upload the content . Before uploading I calculate the dropped element top,left positions wrt to parent div, so that the top,left positions can be used to place the elements exactly at the same place when they are rendered on a different screen along with the background-image(png or jpeg) being passed. But the issue is the elements are placed in a slightly different position compared to their initial placed position.

HTML Before Uploading

<div id="toget"
     class="dropzone"
     [ngStyle]="{'width':'100%',
                 'background-image': 'url('+urlFloorZoneIn+')',
                 'background-repeat': 'no-repeat',
                 'background-position': 'center',
                 'background-size': '100% 100%',
                 'border':'1px solid black',
                 'height':'340px',
                 'position': 'relative'}">

    <div class="box"
         *ngFor="let existingZone of existingDroppedItemZoneIn"
         [ngStyle] = "{'position': 'absolute' , 
                       'top.%':existingZone.spans[1], 
                       'left.%':existingZone.spans[0]}"
         (dragEnd)="onDragEnd($event,existingZone)">

          
        <span></span>
        <span></span>

    </div>

</div>

TS code for calculating the top,left positions

onDragEnd(event,b){


    const existingMovingBlockIndex = (this.existingDroppedItemZoneIn.indexOf(this.currentBox));
    if(existingMovingBlockIndex>-1){
        console.log(b)
        console.log(`got drag end x and y ${event.clientX} ${event.clientY}`)
        console.log(this.dr.onDragMove);

        const container_rect = this.parentparent.nativeElement.getBoundingClientRect();
        this.mouse.x = event.clientX - container_rect.left;
        this.mouse.y = event.clientY - container_rect.top;

        const{width,height} = this.parentparent.nativeElement.getBoundingClientRect();
        const perc_x = this.mouse.x / width * 100;
        const perc_y = this.mouse.y / height * 100;

        this.left = perc_x-5;
        this.topLeft = []
        this.topLeft.push(this.left);

        this.top = perc_y-5;
        this.topLeft.push(this.top);

        this.existingDroppedItemZoneIn[existingMovingBlockIndex].spans[0] = (perc_x);
        this.existingDroppedItemZoneIn[existingMovingBlockIndex].spans[1] = (perc_y);


    }
}

CSS

.box {
  width: 10%;
  height: 10%;
  background: rgba(254, 249, 247, 1);
  border: 1.5px solid #e24301;
  margin: 5px;
  line-height: 100px;
  text-align: center;
  font-size: 0.8rem;
}

.dropzone {
  padding: 20px;
  margin: 20px 0;
  background: lightgray;
  min-height: 200px;
  border: 1px solid black;
 }

Before rendering I get the top,left, background-image values of the above uploaded HTML content and apply the background-image, top, left values to render the below content

After rendering in different screen

<ul>
    <li #allFloors
       *ngFor="let floor of buildings.floors"
       [ngStyle]="{'width': singleFloorFlagStyle ?'40%':'100%',
                   'background-image': 'url('+floor.urlFloorZoneIn+')', 
                   'background-repeat': 'no-repeat',
                   'background-position': 'center',
                   'background-size': '100% 100%',
                   'border':'1px solid black',
                   'height': singleFloorFlagStyle ? '340px' : '700px', 
                   'position': 'relative', 'max-width': '80%'}"
                   [ngClass]="{'width':'80% !important'}">

            <span (click)="loadFloorInfo(floor._id)"></span>
            <div class="fs-heatmap-wrapper__content__box"
                *ngFor="let existingZone of floor.droppeditem"
                [ngStyle]="{'position':'absolute',
                            'top.%': existingZone.spans[1],
                            'left.%': existingZone.spans[0]}">

                
             </div>      
    </li>
</ul>

CSS

.fs-heatmap-wrapper {
display: grid;
*min-height: 800px;
&__content {
    padding: 70px 40px 0;
    min-height: 300px;
    ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        li {
            list-style: none;
            min-width: 48%;
            margin: 12px;
            margin-bottom: 2.5%;
            span {
                cursor: pointer;
                background: #fff;
                text-align: left;
                font-weight: 800;
                font-size: 0.9rem;
                letter-spacing: 0.05rem;
                position: relative;
                top: -30px;
            }
        }
    }

&__box{
width: 100px;       
height: 100px;      
background: rgba(254, 249, 247, 1);     
border: 1.5px solid #e24301;        
margin: 5px;        
line-height: 100px;     
text-align: center;     
font-size: 0.8rem;

    }
  }        
}

from The position of the elements do not remain the same compared to their previous placed position using getBoundingClientRect