html - 无法使用背景位置来定位div

我想在地图上方显示一个圆圈。但是，无论背景位置坐标如何，圆圈始终显示在地图的左上方。我尝试将背景位置设置为40px 40px，但圆圈仍显示在地图的左上方。有人可以告诉我如何通过指定坐标在地图顶部的任何地方显示圆吗？

这是我的代码段：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
  <div id="theIcon" style="position: absolute;z-index:100;width: 30px;height: 30px;border-radius: 50%;font-size: 10px;color: #fff;line-height: 30px;text-align: center;background: red;background-position: 40px 40px";></div>

    <div class="ClsdrawArea" id="draw_area" style="width: 900px; height:900px; background-image: url('https://s30.postimg.org/snqug5qd9/Path_Finding_Map.png'); background-repeat: no-repeat; background-size:cover">
 </div>

</div>

最佳答案

为此，请使用top:40px和left:40px。您也可以使用position:fixed将圆圈固定在顶部

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
  <div id="theIcon" style="position: absolute;z-index:100;width: 30px;height: 30px;border-radius: 50%;font-size: 10px;color: #fff;line-height: 30px;text-align: center;background: red;background-position: 40px 40px;top:40px;left:40px";></div>

    <div class="ClsdrawArea" id="draw_area" style="width: 900px; height:900px; background-image: url('https://s30.postimg.org/snqug5qd9/Path_Finding_Map.png'); background-repeat: no-repeat; background-size:cover">
 </div>

</div>

关于html - 无法使用背景位置来定位div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42065082/