如何在图片上包含单选按钮？

Question

我想在每个黄色标记上放置一个单选按钮。我不知道如何正确放置每个单选按钮。

我发现了类似的问题，其中没有说明如何将单选按钮放在正确的位置：

Place Radio Buttons over image

Make radio buttons over power background image

position radio buttons elements over background image

是否有更好的方法可以做到这一点？也许使用javascript。

Answer 1

希望我没有误会你的问题。在图像上放置元素仅需要CSS。

.container {
  position: relative;
}
.container input[type="radio"] {
  position: absolute;
}

<div class="container">
  <img src="https://i.stack.imgur.com/IlWS2.jpg">
  <input type="radio" name="option1" id="radio1" style="top:150px;left:278px;">
  <input type="radio" name="option1" id="radio2" style="top:150px;left:318px;">
  <input type="radio" name="option1" id="radio3" style="top:204px;left:402px;">
  <input type="radio" name="option1" id="radio4" style="top:260px;left:446px;">
  <input type="radio" name="option1" id="radio5" style="top:260px;left:474px;">
  <input type="radio" name="option1" id="radio6" style="top:260px;left:504px;">
  <input type="radio" name="option1" id="radio7" style="top:260px;left:534px;">
  <input type="radio" name="option1" id="radio8" style="top:260px;left:566px;">
  <input type="radio" name="option1" id="radio9" style="top:350px;left:358px;">
</div>