html - 带标记的响应式 map (div 元素)

Question

大家我对响应式 map 有疑问(这只是图像而不是真实 map )。例如，我尝试在这张 map 上粘贴 div 元素:我的标记 (div) 在巴黎，但是当我调整窗口大小时，标记在其他国家/地区:D 我想为这个国家/地区粘贴此元素。我这样尝试:

HTML:

<div class="container-fluid map">
    <div class="circle"></div>
</div>

CSS:

.map {
    background-image: url(../images/only-map.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 500px;
    width: 100%;
    position: relative;
}

.circle {
    width: 10px;
    height: 10px;
    background-color: #fff;
    position: absolute;
    top: 200px;
    right: 400px;
    float: right;
}

我尝试使用绝对固定位置。背景大小覆盖，包含，100% 100%，但仍然不起作用。

感谢每一次进步

Answer 1

你可以这样做:

HTML:

<div class="map rel">
   <div class="dot abs">
   </div>
</div>

CSS:

.map{
  width: 500px;
  height: 500px;
  background-color: blue;
}

.dot{
  width: 20px;
  height: 20px;
  background-color: red;
}

.rel{
  position: relative;
}

.abs{
  position: absolute;
  top: 8px;
  left: 8px;
}

你可以玩玩它here .希望对您有所帮助。