在调整浏览器大小时，使用javascript移动div图层但不应该移动

Question

我正在开发一个小应用程序来学习Web开发中的Python / Flask，但我遇到的问题与CSS / javascript有关，我无法弄明白。让我们看看它的实际效果：

1. 转到http://sareon.pythonanywhere.com/
2. 输入游戏ID“20234”
3. 在左侧图片上单击几次以创建一些新的div图层/图像
4. 调整浏览器大小并观看，因为新创建的图片不会停留在您点击它们的位置。

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

我认为这是因为.puck CSS的位置是绝对的。将其更改为相对和事物不匹配到您单击的位置，但是当您调整浏览器大小时它们不会移动。无论您在何处单击，静态都会使所有内容沿图像的一侧排列。固定与绝对相同。

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

Answer 1

尝试将它们放在position: relative容器中，然后每个冰球仍应position: absolute。

Answer 2

您将“绝对”定位每个.puck元素。原点（left：0; top：0）值必须来自.puck的父元素之一。看到.puck的父元素都没有明确定义任何“位置”属性，它将默认为浏览器窗口的左上角。

修复？在#hockeyRinkHome元素中添加'position：relative'。这样，当.puck元素被定位时，它只向上遍历#hockeyRinkHome元素的一个div，并决定将它的绝对位置基于该元素。它的左上角变为新的（左：0;顶部：0）。

您必须重新调整计算以放置每个.puck。然而，它现在将始终保持稳定和恒定。