JavaScript

msdsmd sm,dfsadf
PLUS
msdsmd sm,dfsadf
Courses Plus Student 1,013 Points

These are five line of JS code and very simple to read. I do not know why this happening.

<html>
<head>
<title>Page Title</title>
<style>
*{margin:0;}
@keyframes move{
0%{
height:0;
width:0;
}
100%{
height:30px;
width:30px;
}
}
</style>
</head>
<body>
<div style="height:100px;width:100px;position:relative;background:red;">
<span style="height:30px;width:30px;position:absolute;
transform:translate(-50%,-50%);animation:6s move infinite;background:blue;">
</div>
<script>
const div = document.querySelector('div')
div.addEventListener('click',function(e){

const child =div.children[0]
child.style.top=e.clientY     - e.target.offsetTop + 'px'
child.style.left=e.clientX   - e.target.offsetLeft + 'px'
})
/*I  do not know why this happens when
 I click the div at the bottom right twice at the
 same location, and the second time I  click the div, 
the span tag move to the top left.
*/


/*If I remove the e.target.offsetTop and left, that will 
not happen, but I want to know why adding e.target.offsetTop 
   and left  make unwanted change.
*/
</script>
</body>
</html>
msdsmd sm,dfsadf
msdsmd sm,dfsadf
Courses Plus Student 1,013 Points

Please, do not respond, and I figure out why this happens.