javascript - 在 HTML/CSS 中分层 PNG？

我想使用 HTML、CSS 和 JS 制作一个交互式世界地图。使用 SVG 可能是推荐的方式，但老实说，我没有使用它的经验。加上编辑路径进行小的更改是一种痛苦。我真的更喜欢将每个国家/地区导出为 PNG 图像，将它们放在 HTML 中，JS 将处理所有交互。

这在概念上真的很容易。然而，问题是如何对这些不同的 PNG 进行分层，以便每个国家都位于其特定的位置？如果您使用两个<img src=...，它会将图像放入一列或一行：

这是应该的

但这就是它在 HTML 中的显示方式

或这个

有什么方法可以将这些图像堆叠在一起而不将它们放入列或行中？
如果没有，是否可以跟踪光标在图像中的位置？如果将国家单独放在 PNG 上不起作用，我打算将整个世界地图导出到一个 PNG 中，然后在单击图像时监视光标的位置，这样我就可以获得用户单击的特定国家上。那可能吗？

原谅我对这个太天真了。万分感谢！

标签： javascripthtmlcsspng

对于这种情况，我会position:absolute在图像上使用，并使用 left、right、top、bottom 属性以您喜欢的方式对齐它们。只要确保设置position:relative为您的父 div。

如果由于某种原因无法做到这一点，您可以使用 transform 属性来设置水平和垂直位置。