HTML position = center-10px

Question

我正在制作一个HTML网站。我有一张地图作为背景图片，我需要一个按钮才能在地图上。像这样：

但是，当我开始扩展我的网站时，会发生这种情况： 我知道问题是什么：图片的位置是center-X px和center-Y px，而不是margin: 40% 0px 0px 20%。但是怎么做呢？ position: absolute; left: 50%-30px; top: 50%-83px不起作用。

Answer 1

您可以使用支持率高于calc()的负边距。

resolvers += "Spark Packages Repo" at "http://dl.bintray.com/spark-packages/maven"
libraryDependencies += "neo4j-contrib" % "neo4j-spark-connector" % "2.1.0-M4"

如果你已经有了边距，你可以从那里减去它们。但是，如果将它们定义为百分比或position: absolute; left: 50%; top: 50%; margin-top: -83px; margin-left: -30px; ，则您必须相应地转换它们。

Answer 2

许多人提到使用绝对边距（这会起作用），但是有另一种方法可以实现transform: translate。

在下面的示例中，内部img始终以其包含div为中心，我相信这也符合您的需求。我还在框中添加了一些随机动画，这样你就可以看到它有效地定位了它。

setInterval(randomAnimation, 500);

function randomAnimation() {
  var random = Math.floor(Math.random() * (4 - 0));
  if (random == 0)
    $(".box").animate({
      top: "+=50"
    });
  else if (random == 1)
    $(".box").animate({
      left: "+=50"
    });
  else if (random == 2)
    $(".box").animate({
      top: "-=50"
    });
  else
  $(".box").animate({
      height: "+=50"
    });
}

.box {
  position: relative;
  width: 150px;
  height: 100px;
  background-image: url(http://via.placeholder.com/150x100/ff0000/ffffff)
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
  <img src="http://via.placeholder.com/50x50" />
</div>

Answer 3

您希望图像相对于背景图像（带有地图的div容器作为背景图像）：

position: relative; left: 30px; top: 83px