Question

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

以下是我的代码段：

＆＃13;

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

＆＃13;

Answer 1

要使其使用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>

Answer 2

绝对定位他的网页相对位置。试试

 <div class="form-group">
 <?php echo form_textarea(array('name' => 'txtdescription', 'id' => 'desc', 'class' => "ckeditor", 'value' => set_value('txtdescription', $desc,false))); ?>         
 </div>

Answer 3

您需要添加top＆amp;定位元素（红点）的left属性，此外，添加到其包装元素position:relative;，因此它将充当定位上下文，而不是body。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div style="position:relative;">
  <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;top:120px;left:234px;"></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>

＆＃13;

Answer 4

您错过了通过提供顶部/左侧/底部/右侧及其像素值的组合来提供您想要渲染的位置。

我刚刚在您的代码段中添加了左上角和左侧样式，您可以看到它显示为向右移动到左上角。

当你指定位置绝对值时，它会将它作为其父dom元素的左上角（具有相对位置）。

下面是我添加了上下左侧风格的代码

<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;left:100px; top:20px";></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>

Answer 5

如果您想使用坐标，则需要在HTML中使用Map和Area标签

要将圆圈定位在特定位置，请使用

TOP:50px; 
LEFT:50px;

Answer 6

background-position用于设置背景图像的起始位置（背景图像）

它不适合背景颜色。

你可以使用position和absolute属性的left和top属性这样做：

  <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;left: 40px;top: 40px;"></div>

不能使用背景位置来定位div

6 个答案: