Element.offsetTop неожиданно увеличивается

Несмотря на то, что я нашел ответ, я создаю этот вопрос, чтобы другие могли узнать, есть ли у них такая же проблема.

Я создаю веб-страницу как инструмент для использования в другом проекте; цель состоит в том, чтобы позволить мне манипулировать текстом, наложенным на изображение, и отображать информацию о тексте, такую ​​как его верхний и левый атрибуты.

Я столкнулся с проблемой при реализации метода W3 для создания перетаскиваемых элементов. При перетаскивании элемента его левое значение изменится, как и ожидалось, но верхнее значение будет увеличиваться на 16 для каждого вызова elementDrag(e), в частности, для каждого использования elmnt.style.top = (elmnt.offsetTop - pos2) + "px";. Я пробовал много вещей и думал, что схожу с ума, пока не нашел простое решение на этой странице. Причина проблемы заключалась в том, что перетаскиваемый элемент имел отступ в 16 пикселей, поэтому elmnt.offsetTop всегда будет на 16 пикселей больше, чем elmnt.style.top.

Вот страница в скрипке если хотите посмотреть на мою проблему своими глазами. Это все еще WIP, и я новичок, поэтому он не очень отточен.

1. Введите текст в поле ввода слева от «Введите здесь».
2. Нажмите Enter или нажмите кнопку «Отправить».
3. Нажмите на текст, который находится над отсутствующим изображением
4. Затем нажмите и перетащите, как обычно.
5. Если вы хотите воспроизвести проблему, удалите margin: 0px; из CSS для «.overlayText».