html - div 内的相对位置。奇怪的互动

Question

我正在尝试在 html 中复制 Udacity 问题。原来的问题在这里。(*)

我的例子在这里。如您所见（**），唯一的问题是单选按钮的位置（***）。我已经看到使用 gimp 的位置，并尝试将它们用于 html。然而，不仅有一个偏移量（它本身是完全可管理的），而且这个偏移量也因按钮而异。更糟糕的是：似乎存在某种交互：删除一些按钮会使其余按钮更接近它们应该在的位置。

我（假设）我只能猜测位置直到我猜对了，但由于我可能会多次这样做，我宁愿更好地理解这个问题。到底是怎么回事 ？有没有更好的方法来达到同样的结果？

（*）我已经收到了查看源代码的建议，并尝试过，但没有成功（**）我在 firefox 14 和 chromium 18 （***）
上打开了文件
北、西、东和西下方的广场上

Answer 1

相对定位不是你想要的。相对意味着将元素从其标称位置偏移，但就其如何影响流中的后续元素而言，将其视为处于其原始位置。

你真正想要的是绝对定位。首先，您需要对容器（图形 div）应用相对或绝对定位，然后应用到内容的任何绝对定位都将相对于该容器。

当然，这个术语有点令人困惑，因为绝对位置实际上是相对于容器的。