在<map> <area />

Question

我有HTML <map>标记，让我们说3个区域。在区域1,2或3上的点击事件中，我想为每个<div class="pop-content">显示不同内容的<area>。

此时我的<div class="pop-content">就像这张照片一样浮动到顶部。

我想要的是在此图片上显示每个<div class="pop-content">旁边的<area>。

到目前为止我的CSS

.pop-content{
  width: 100px;
  height : 120px;
  background-color: gray;
  position: relative;
}

问题是如何使用CSS <div class="pop-content">来实现像2图像一样的位置？

我从我的项目中划分了我的示例并将其复制到此JsFiddle

中

Answer 1

JSFIddle

<强>解决方案：

img {
    position: absolute;
}

.pop-content {
  width: 50px;
  height: 20px;
  padding: 5px;
  background: red;
  position: absolute;
  z-index: 100;
  top: 69px;
  left: 101px;
}

注意：但是对于每个星球（<area>），引入新的类，如pop-content1，pop-content2等具有不同位置的类。