Неудачно, пытаясь установить положение элемента html с помощью clientX

Question

У меня есть два элемента div и один элемент img:

    <div class="game-container">

      <div class="bubble-container">

    <img src="https://raw.githubusercontent.com/diegoleonardoro/bronx_tourism/master/line.png" class="line" width="128"
        height="12" />
    </div>

  </div>

В моем JavaScript я пытаюсь добавить и прослушиватель событий для div "game-container". Предполагается, что этот прослушиватель событий добавляет некоторое движение к тегу изображения, например:

  var yellowBox = document.querySelector(".game-container");
  var line = document.querySelector(".line");

yellowBox.addEventListener("mousemove", function (e) {

    var r = e.clientX;

    line.style.left = r + "px";
    line.style.left = r + "px";

    console.log("Black Line", line.getBoundingClientRect());
    console.log("r", r);

})

Ожидаемый результат - результат того, что переменная r будет такой же, как переменная строка, когда я двигаюсь мышь. Однако это не то, что я получаю. Когда я двигаю музу, положение этих двух элементов не одинаково. Когда Если проверить два журнала консоли, это то, что я получаю:

console.log("Black Line", line.getBoundingClientRect());:

console.log("r", r);

Заранее спасибо!

Answer 1

Мне удалось это исправить, просто вычтя разницу из результата console.log ("r", r); и результат console.log («Черная линия», line.getBoundingClientRect (). left);

Я не понимаю, почему я сделал это вычитание. Если у кого-то есть понимание, поделитесь им.