Javascript 快速响应web开发，缩放重叠图像，同时将可点击图像保持在准确位置

我被要求准备一个只有五个可点击点的HTML页面。 点击点背后的想法就是要有一个弹出窗口来解释一些信息

我可以缩放背景图像（画布）的100%宽度/100%高度，在各种设备上都可以正常工作，但我的画布上有图像，当我缩小时，画布会缩小，但我的可点击图像不会停留在其确切位置。它仍然相对接近它的原始位置，但我需要它保持在它的确切位置，以及页面的浏览比例

如果您能提供任何帮助/示例，我将不胜感激

谢谢你的帮助

另外，请查看我的页面链接（大学）：

---

谢谢！将相应地修改CSS。引导跨越类？我同意使用%和px。我一直在尝试很多事情，但都做得不好。你有没有举个例子？感谢您的回复。您的可点击图像是使用屏幕宽度的百分比定位的。随着屏幕大小的改变，它的位置也会改变。如果要固定，请使用

px

或其他单位中的绝对位置。这意味着该部门占25%，即3/12。您可以到达span12，即总面积的100%。谢谢@CodeMonkey。我会试试这个，让你知道我怎么做。谢谢大家的评论。非常有用！=]和-这些将显示左上角相对于文档和父级的位置。如果您的图像被精确地切割成小块，左上角位于您需要的位置，那么无论屏幕大小如何，您都可以收集移动“可点击项”所需的坐标。