我想使用 HTML、CSS 和 JS 制作交互式世界地图。 使用 SVG 可能是推荐的方式，但老实说我没有使用它的经验。再加上进行微小更改的编辑路径是一件痛苦的事情。我真的更喜欢将每个国家/地区导出为 PNG 图像，将它们放在 HTML 中，然后 JS 将处理所有交互。
这在概念上真的很简单。然而，问题是如何将这些不同的 PNG 分层，以便每个国家都位于其特定位置？如果你使用两个 <img src=...它会将图像放入一列或一行中:
本应如此
但这就是它在 HTML 中的显示方式
或者这个
- 有什么方法可以将这些图片堆叠在一起而不用将它们排成一列或一行？
- 如果不能，是否可以跟踪光标在图像中的位置？如果将国家/地区单独放在 PNG 上行不通，我打算将整个世界地图导出到一个 PNG 中，然后在单击图像时监视光标的位置，以便获得用户单击的特定国家/地区在。这可能吗？
原谅我太天真了。非常感谢!
最佳答案
对于这种情况，我会在图像上使用 position:absolute，并使用 left、right、top、bottom 属性按您喜欢的方式对齐它们。请务必将 position:relative 设置为您的父 div。
如果出于某种原因无法做到这一点，您可以使用 transform 属性来设置水平和垂直位置。
关于javascript - 在 HTML/CSS 中分层 PNG？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57764368/