基于该图像坐标将图像放置在另一图像上

问题描述

我需要创建一个角度为8的组件，该组件包含用作地图的大图像，并基于该图像坐标将动态较小的图像放置在前者上。 例如：我在背景中有一张房间图像。从服务器上我知道我的椅子图像是20x20像素，它应该放置在相对于房间图像的120x 300y的中心位置。

我如何才能做到这一点？我试着使用一些css技巧，比如将较大的div包装在相对定位的div中，较小的将绝对div设置为NgStyle，但它只将其设置为0.0

对于项目要求，我不能使用AngularMaterial。

推荐答案

如果我正确理解了您的问题，只需将您的椅子图像相对于背景图像放置即可。我会将您的背景包装在一个容器中，该容器将是任何其他绝对内部元素的相对容器。

类似的内容：

.room-container {
  position: relative;
}

.chair {
  position: absolute;
  
  top: 400px;
  left: 400px;
}

<div class="room-container">
  <!-- BG Image-->
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Hotel-suite-living-room.jpg" alt="">
    
  <!-- Chair image -->
  <img src="https://www.ikea.com/us/en/images/products/ekedalen-chair-brown__0516603_PE640439_S4.JPG" alt="" class="chair">
</div>