如何将坐标转换为相对变换 px

问：

我想通过计算鼠标单击坐标在容器内移动 ping。

我试图在这些img中得到类似的东西（蓝色是鼠标点击，红色是ping），

图像 1 图像 2

<div class="h-screen w-full bg-gray-100 flex justify-center items-center">
    <div class="relative container w-72 h-72 bg-white" id="container">
      <span class="bg-red-500 absolute h-8 w-8 rounded-full top-0 left-0 z-50" id="ping"></span>
    </div>
  </div>

document.addEventListener('click', (e) => {
      const container = document.getElementById('container');
      const ping = document.getElementById('ping');

      // Calculate the position relative to the container
      const containerRect = container.getBoundingClientRect();
      console.log(e.clientX, e.clientY)
      let x = e.clientX - containerRect.left;
      let y = e.clientY - containerRect.top;
      console.log({ x, y })

      console.log(containerRect);
      x = Math.max(0, Math.min(containerRect.width, x));
      y = Math.max(0, Math.min(containerRect.height, y));

      ping.style.transform = `translate(${x}px, ${y}px)`;

    })

我认为这些图像是有道理的，我真的不知道我该如何正确解释，在这里感觉完全是胡说八道。