在调整浏览器大小时使用javascript移动放置div层，但不应'；T

我正在开发一个小应用程序来学习web开发中的Python/Flask，但我遇到的问题与CSS/javascript有关，我无法解决。让我们看看它的实际行动：

去

输入游戏ID“20234”

在左侧的图像上单击几次以创建一些新的div层/图像

调整浏览器大小，观察新创建的图像不会停留在您单击的位置

我不知道如何解决这个问题

我认为这是因为.puck CSS具有绝对的地位。将其更改为“相对”，则内容与您单击的位置不匹配，但在调整浏览器大小时它们不会移动。“静态”使所有内容沿图像的侧面排列，而不考虑单击的位置。“固定”与“绝对”具有相同的功能

---

因此，我不知道如何去弄清楚这一点

试着把它们放在一个

位置：相对的
容器中，然后每个冰球都应该是静止的
位置：绝对的
试着把它们放在
位置：相对的
容器中，然后每个冰球都应该是静止的
位置：绝对的
<“绝对”定位每个.puck元素。原点（左：0；顶：0）值必须来自.puck的父元素之一。由于.puck的父元素没有明确定义任何“位置”属性，因此它将默认位于浏览器窗口的左上角

修复？向#hockeyRinkHome元素添加“位置：相对”。这样，当定位.puck元素时，它只向上穿过一个div到#hockeyRinkHome元素，并决定将其绝对位置基于该元素。它的左上角成为新的（左：0；上：0）

你必须重新调整你的计算来放置每个冰球。但是，它现在将始终保持稳定和不变。
您正在“绝对”定位每个.puck元素。原点（左：0；顶：0）值必须来自.puck的父元素之一。由于.puck的父元素没有明确定义任何“位置”属性，因此它将默认位于浏览器窗口的左上角

修复？向#hockeyRinkHome元素添加“位置：相对”。这样，当定位.puck元素时，它只向上穿过一个div到#hockeyRinkHome元素，并决定将其绝对位置基于该元素。它的左上角成为新的（左：0；上：0）

你必须重新调整你的计算来放置每个冰球。但是，它现在将始终保持稳定和恒定。
但是，请确保在放下圆盘时，使用父元素的
偏移顶部
与
顶部
值之间的差值，以及
偏移左侧
与
左侧
值之间的差值。是的，这就是问题所在。照丹尼尔说的做，这样他们就不会移动，但现在他们不是坐在你点击的地方，而是坐下来，向左一堆。不过，要确保当你放下冰球时，使用父元素的
offsetTop
与
top
值的差值，以及
offsetLeft
与
left
值的差值。是的，这就是问题所在。照Daniel说的做，这样他们就不会移动，但现在他们不是坐在你点击的地方，而是坐在左边一堆。这主要是因为
margin:auto
值，但使用相对的父项将解决这个问题。这主要是因为
margin:auto
值，但不管怎样，使用相对父项都可以解决这个问题。