0

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

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

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

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

所以我不确定如何解决这个问题

4

2 回答 2

2

试着把它们放在一个position: relative容器里，然后每个冰球应该是静止position: absolute的。

于 2013-03-25T19:55:41.550 回答
1

您正在“绝对”定位每个 .puck 元素。原点（左：0；上：0）值必须来自 .puck 的父元素之一。由于 .puck 的所有父元素都没有明确定义的“位置”属性，因此它将默认位于浏览器窗口的左上角。

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

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

于 2013-03-25T20:08:02.473 回答