这是我目前拥有的代码。我希望当单击图像时，4 个圆圈将自己定位在图像的四个角上。无论图像位于何处。
$("img").click(function() {
});
$( function() {
$( "img" ).draggable();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg" width="150px" height="150px">
<img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg" width="150px" height="150px">
<img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg" width="150px" height="150px">
<img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg" width="150px" height="150px">
<br>
<i id="top-left" class="fa fa-circle-o"></i>
<i id="top-right" class="fa fa-circle-o"></i>
<i id="bottom-left" class="fa fa-circle-o"></i>
<i id="bottom-right" class="fa fa-circle-o"></i>可能有很多方法可以做到这一点，正如 John 上面提到的，您可以将它们包装在单独的div 中并使图标相对(这可以添加到用户创建图像时添加到您的 js 中，并且相当简单(。
另一种选择是，您可以使用与上述相同的div 包装方法，但改用 flex-box 显示，有问题的图像将有一个div 包装它，该图像将显示设置为"flex"，然后使用"对齐"和"对齐"的属性来设置每个图标的位置取决于您放置它们的位置。这也是用户通过 js 创建时实现的，并导致可扩展的响应式设计。
您也可以以类似的方式使用网格布局，但我认为弹性框更易于使用和理解。
这是了解它的绝佳资源。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/