我正在开发一个小型应用程序，以在Web开发人员中学习Python / Flask，但是我遇到的问题与CSS / javascript有关，我无法弄清楚。让我们来看看它的作用：
转到http://sareon.pythonanywhere.com/
输入游戏ID“ 20234”
在左侧的图像上单击几次以创建一些新的div层/图像
调整浏览器的大小，并注意新创建的图像不会停留在您单击它们的位置。
我不确定如何解决此问题。
我认为这是因为.puck CSS具有绝对的地位。将其更改为“相对”，事情不会与您单击的位置匹配，但是当您调整浏览器大小时，它们不会移动。静态效果使所有内容都沿着图像的侧面对齐，无论您单击何处。固定与绝对具有相同的作用。
所以我不确定如何解决这个问题
最佳答案
您正在“绝对”放置每个.puck元素。原点（左：0；上：0）值必须来自.puck的父元素之一。鉴于.puck的所有父元素都没有明确定义任何“位置”属性，因此它将默认位于浏览器窗口的左上方。
解决办法？在#hockeyRinkHome元素上添加一个“ position：relative”。这样，在放置.puck元素时，它仅向#hockeyRinkHome元素上移一个div，并决定以该元素的绝对位置为基础。它的左上角变为新的（左：0；上：0）。
您将不得不重新调整放置每个.puck的计算。但是，它现在将始终保持稳定不变。
关于javascript - 调整浏览器大小时，用javascript移动div层，但不应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15623496/