javascript - 在游戏 map 上动态定位绝对元素

Question

我发现自己陷入了这个问题:我有带有以下代码的游戏 map

代码

.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>

我想在游戏 map 上绝对定位 #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 属性，并且它会在窗口调整大小后正常工作。