Вопрос по JS-задаче(перемещение элемента)

Задача простая, из learn.js Есть поле, в нём элемент(мяч) - кликаешь куда-то по полю - в место клика перемещается элемент.Не пойму: вот я сначала написал(думал так правильно будет)
ball.style.left = e.clientX - ball.width / 2 + 'px'

По идее, что это значит: отступ слева для элемента(мяча) = Координаты клика по X - половинка длины мяча, в px

Вроде бы всё логично, но если кликнуть по Полю - то вместо перемещения в место клика Мяч улетит куда-то вниз за пределы Поля. Не пойму почему
А если добавить - field.offsetLeft, то всё заработает как надо.

А .offsetLeft - это свойство, которое показывает смещение элемента относительно родителя с position(relative, absolute, fixed). А у Поля у меня родитель - body. И у него нет такого position.


В общем не пойму что тут делают field.offsetLeft/field.offsetTop и почему без них не работает, объясните пожалуйста.