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

Question

我发现自己遇到了这个问题：我有以下代码的游戏地图

代码

.content-right {
  width: 50%;
  height: 100%;
  position: relative;
  align-self: auto;
  background-color: #44362D;
}
.content-inner-top {
  width: 100%;
  height: 70%;
  background-image: url("http://i.imgur.com/wLJ1Pnt.jpg"); /* map.png */
  background-position: left center;
  background-size: 100% auto;
  -moz-user-select: none;
  background-repeat: no-repeat;
  box-sizing: border-box;
  position: relative;
  -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);
}
.content-inner-bottom {
  width: 100%;
  height: 30%;
  margin: 0 auto;
  z-index: 9;
  text-align: center;
  display: block;
  position: relative;
  top: 10%;
  transform: translateY(-10%);
}
#position {
  width: 4%;
  height: 6.11979%;
  background-color: #FF503C;
  border: 3px solid #90EE90;
  box-shadow: 0px 0px 35px #87CEEB;
  position: relative;
  border-radius: 50%;
  transform: scaleY(0.75);
  left: 85%;
  top: 200px;
}

<div class="content-right">
  <div class="content-inner-top">
    <div id="position"></div>
  </div>
  <div class="content-inner-bottom"></div>
</div>

我想在游戏地图上绝对定位#position元素，但是，我发现这是不可能的，因为每次调整浏览器窗口高度时，元素都会转到另一个地方。图像如下所示。

图片

1 ^st 图像（正常窗口）

2 ^nd 图像（调整大小的窗口）

我该怎么办？我无法通过javascript或jQuery找到解决方案......

感谢您的提前帮助

Answer 1

我看到'px'中有一个顶部但是当你减小窗口的大小时，图像不仅在宽度上而且在高度上都较小。这就是指针下降的原因。 百分比'左'属性似乎工作正常。如果你想使用'top'属性的百分比（这可以解决问题），你必须明确定义元素的高度（在你的情况下的图像）。你可以用jQuery做到这一点，例如最容易这样（假设你有一个#image元素）：

$('#image').height($('#image').height());

然后您可以添加调整大小处理程序并重新指定新高度。您可能必须删除之前的高度，因此整体将是这样的：

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

然后你应该能够在百分比中使用css top属性，并且在窗口调整大小后它将正常工作。

Answer 2

您需要修改布局才能实现此行为 首先，您需要将地图添加为if并为其创建持有者

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-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:"";
}

这是一个有效的Fiddle

Answer 3

我会使用SVG，简单的代码和完全响应：

svg {
  display: block;
  width: 100%;
}
circle {
  stroke: white;
  stroke-width: 3;
  fill: red;
}

<svg viewBox="0 0 604 568">
  <image x="0" y="0" width="586" height="604" xlink:href="http://i60.tinypic.com/2enrntu.jpg"/>
  <circle cx="400" cy="190" r="20"/>
</svg>