Question

大家我有响应式地图的问题（这只是图像不是真实的地图）。我试图在这张地图上贴上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

您需要使用百分比

的职位

.circle {
    position: absolute;
    top: 40%;
    left: 50%;
}

但请记住，您的圈子将以角落为中心，您可以通过调整百分比和设置来阻止：

.circle {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%); //else only the upper-left corner of the circle div will be centered on paris)
}

正如所说的那样，如果没有看到实际的图像和结果总是很难帮助，但这可能有效

Answer 2

您可以这样做：

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。希望有所帮助。

带标记的响应地图（div元素）

2 个答案: