Css 如何使图钉跟随地图？

我有一张带有一些针脚的地图，这些针脚的位置是绝对的。如何使引脚对所有设备都有响应？有没有办法让他们跟随他们的父母

div

？我曾尝试使用

媒体查询

，但要专门设计这些PIN需要很长时间。 这是一个例子

HTML:

<div class="map-wrapper">
  <div class="map"></div>
  <a class="rpin code-warszawa"></a>
  <a class="rpin code-gdansk"></a>
  <a class="rpin code-kalisz"></a>
  <a class="rpin code-kielce"></a>
  <a class="rpin code-konin"></a>
  <a class="rpin code-krakow"></a>
  <a class="rpin code-ostrow-wielkopolski"></a>
  <a class="rpin code-poznan"></a>
  <a class="rpin code-wroclaw"></a>
</div>

---

你听说过图像地图吗？您可以在图像上的特定位置设置链接区域，并且它是响应的

要使用管脚，应使用照片编辑器将其应用于图片，并将区域放置在这些管脚上方

---

查看此图。

将地图图像放入HTML中，而不是背景图像，其包装器也可以包含图像和PIN

然后包装器具有

position:relative

可以绝对定位插脚（正如您所拥有的），所需的只是调整百分比位置值

我还建议使用

%

来调整针的大小，以便它们与地图成比例

注意：本演示中未调整插针位置。

.map{
显示：内联块；
保证金：1em自动；
位置：相对位置；
边框：1px纯灰；
}
.map img{
最大宽度：100%；
显示：块；
}
罗宾先生{
位置：绝对位置；
显示：块；
宽度：5%；
身高：5%；
背景：url（'https://s33.postimg.cc/6d6a8b4yn/pin.png“）无重复中心；
背景尺寸：包含；
转换：translateX（-50%）translateY（0）；
滤镜：亮度（1）对比度（1.1）；
过渡：全部。3秒轻松；
}
.rpin:悬停{
光标：指针；
转换：translateX（-40%）量表（1.05）；
}
.warszawa代码{
底部：55.9282%；
左：65.5994%；
}
格但斯克代码{
底部：89.858%；
左：45.716%；
}
.卡利兹代码{
底部：45.2392%；
左：39.4641%；
}
.kielce代码{
底部：27.9065%；
左：62.2945%；
}
.科宁代码{
底部：53.4868%；
左：41.3139%；
}
克拉科夫代码{
底部：14.1059%；
左：57.1113%；
}
.代码ostrow wielkopolski{
底部：43.573%；
左：36.9038%；
}
波兹南代码{
底部：56.831%；
左：31.9521%；
}
.弗罗茨瓦夫法典{
底部：33.6384%；
左：32.7036%；
}

位置：相对的

？正如你所看到的，

地图包装器中有一个
位置：相对的
。但不是在插针上。我不理解你的想法。如果插针有绝对定位，那么它们绝对定位。如果它们有相对，它们就是相对于它们的父对象的，因为父对象也有相对集。因此，将引脚设置为相对，而不是绝对，他们会跟着父母到任何地方。我需要这些插脚可以点击。你想用这些插脚做什么？我想点击它们，点击后可以让我改变代码中的一些状态。你可以给图像地图中的区域ID，然后点击一个特定的区域来做些什么。如果我有一个像这样的位置-用2怎么办不同的包装？取决于你想做什么。我想要两个div——一个在左边（地图上），一个在右边（只是一个临时div）——它们都有
宽度：50%
，并包装在一个容器中。我希望这张地图仍然有效。谢谢你的帮助！对此我很抱歉，但这是我目前对代码的最后修改。同样的基本技术也适用。所以这只是修改代码的问题。
  .map-wrapper {
    width: 50%;
    height: 60vh;
    margin: 0 auto;
    position: relative;
  }
  .map {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
    background-image: url('https://s33.postimg.cc/v6fu8qirj/rst-map.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .rpin {
    position: absolute;
    display: block;
    width: 30px;
    height: 40px;
    background: url('https://s33.postimg.cc/6d6a8b4yn/pin.png') no-repeat center center;
    background-size: contain;
    transform: translateX(-50%) translateY(0);
    filter: brightness(1) contrast(1.1);
    transition: all .3s ease;
  }
  .rpin:hover {
    cursor: pointer;
    transform: translateX(-40%) scale(1.05);
  }
  .code-warszawa {
    bottom: 55.9282%;
    left: 65.5994%;
  }
  .code-gdansk {
    bottom: 89.858%;
    left: 45.716%;
  }
  .code-kalisz {
    bottom: 45.2392%;
    left: 39.4641%;
  }
  .code-kielce {
    bottom: 27.9065%;
    left: 62.2945%;
  }
  .code-konin {
    bottom: 53.4868%;
    left: 41.3139%;
  }
  .code-krakow {
    bottom: 14.1059%;
    left: 57.1113%;
  }
  .code-ostrow-wielkopolski {
    bottom: 43.573%;
    left: 36.9038%;
  }
  .code-poznan {
    bottom: 56.831%;
    left: 31.9521%;
  }
  .code-wroclaw {
    bottom: 33.6384%;
    left: 32.7036%;
  }