Javascript 在游戏地图上动态定位绝对元素

我发现自己陷入了这个问题：我有一个带有以下代码的游戏地图

密码

。内容权限{
宽度：50%；
身高：100%；
位置：相对位置；
自对准：自动；
背景色：#44362D；
}
.内容内顶部{
宽度：100%；
身高：70%；
背景图像：url（“http://i.imgur.com/wLJ1Pnt.jpg“”；/*map.png*/
背景位置：左中；
背景尺寸：100%自动；
-moz用户选择：无；
背景重复：无重复；
框大小：边框框；
位置：相对位置；
-webkit盒阴影：嵌入0px 0px 35px 11px rgba（0,0,0,0.75）；
-moz盒阴影：嵌入0px 0px 35px 11px rgba（0,0,0,0.75）；
方框阴影：插入0px 0px 35px 11px rgba（0,0,0,0.75）；
}
.内容内底{
宽度：100%；
身高：30%；
保证金：0自动；
z指数：9；
文本对齐：居中；
显示：块；
位置：相对位置；
排名前10%；
转化：translateY（-10%）；
}
#位置{
宽度：4%；
身高：6.11979%；
背景色：#FF503C；
边框：3px实心#90EE90；
盒影：0px 0px 35px#87CEEB；
位置：相对位置；
边界半径：50%；
变换：scaleY（0.75）；
左：85%；
顶部：200px；
}

---

我看到“px”中有一个顶部，但当你减小窗口大小时，图像不仅在宽度上更小，而且在高度上也更小。这就是指针下降的原因。 百分比“左”属性似乎工作正常。如果还希望对“top”属性使用百分比（这可以解决问题），则必须显式定义元素的高度（您案例中的图像）。例如，使用jQuery可以很容易地做到这一点（假设您有一个#image元素）：

然后，可以添加调整大小处理程序并重新指定新高度。您可能需要删除以前的高度，因此整个高度如下所示：

$(window).resize(function() {
    $("#image").css("height","");
    $('#image').height($('#image').height());
});

---

然后，您应该能够使用css top属性（以百分比为单位），并且在调整窗口大小后它将起作用。

您需要修改布局以实现此行为 首先，您需要将地图添加为

img

，并为其创建一个支架

<div class="content-right">
    <div class="content-inner-top">
        <div class="map-holder">
            <img src="http://i.imgur.com/wLJ1Pnt.jpg" class="content-inner-map" />
            <div id="position"></div>
        </div>
    </div>
    <div class="content-inner-bottom"></div>
</div>

改变

.content-inner-top {
    width: 100%;
    height: 70%;
    -moz-user-select: none;
    box-sizing: border-box;
    position: relative;
}

#position {
    width: 4%;
    height: 6.11979%;
    background-color: #FF503C;
    border: 3px solid #90EE90;
    box-shadow: 0px 0px 35px #87CEEB;
    position: absolute;
    border-radius: 50%;
    transform: scaleY(0.75);
    left: 85%;
    top: 24%;
}

---

下面是一个有效的

我将使用SVG，代码简单，响应能力强：

svg{
显示：块；
宽度：100%；
}
圈{
笔画：白色；
笔画宽度：3；
填充物：红色；
}

图像已损坏，您可以在imgur上镜像它们，或通过问题编辑器中的imgur客户端上传它们吗？您的位置是否接近或准确到可以放置在那里？@Thiyagesh:您可以将这些图像转换为imgur图像吗，因为托管站点被归类为内容共享站点，可以被安全网络阻止。只需在评论中发布链接，谢谢。现在图片就在这里：元素“#位置”是一个圆圈，需要放在图片中的确切位置，以便以后可以激活…嗨，andrija，没有回复评论？…图片元素是指针还是整个地图图片？这就是图片。您有一个相对定位的元素（地图），在该元素中，您希望绝对定位指针（顶部：X%；左侧：Y%）。绝对位置相对于相对定位的父对象。唯一的问题是，你必须定义图像的高度-否则top:X%不起作用。工作非常完美！谢谢！：）

.content-inner-map {
    resize: both;
    width: 100%;
}
.map-holder {
    position: relative;
    top: 50%;
    display: block;
    transform: translateY(-50%);
}
.content-inner-top:after {
    position: absolute;
    -webkit-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
    top:0;
    left:0;
    right:0;
    bottom:0;
    content:"";
}

.content-inner-top {
    width: 100%;
    height: 70%;
    -moz-user-select: none;
    box-sizing: border-box;
    position: relative;
}

#position {
    width: 4%;
    height: 6.11979%;
    background-color: #FF503C;
    border: 3px solid #90EE90;
    box-shadow: 0px 0px 35px #87CEEB;
    position: absolute;
    border-radius: 50%;
    transform: scaleY(0.75);
    left: 85%;
    top: 24%;
}