将单选按钮元素放置在背景图像上答案

【问题标题】：position radio buttons elements over background image将单选按钮元素放置在背景图像上
【发布时间】：2016-12-15 14:43:30
【问题描述】：

我有一个背景图像，想放置一些单选按钮（单选按钮的圆圈将被隐藏，只有标签会出现）靠近红色三角形（如图所示here）。我怎样才能做到这一点？请在此处查看我的代码

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  border: 2px solid red;
}

<img src="http://i.stack.imgur.com/CUTm6.png" alt="Synoptic table" align="center">
<div class="buton">
  <input type="radio" name="a" value="a" id="a" />
  <label for="a">text radio 1</label>
</div>
<div class="buton">
  <input type="radio" name="a" value="b" id="b" />
  <label for="b">text radio 2</label>
</div>
<div class="buton">
  <input type="radio" name="a" value="c" id="c" />
  <label for="c">text radio 3</label>
</div>

【问题讨论】：

Stackoverflow 不是代码编写平台。您可以提供代码示例。我们可以帮助您解决问题！
position:absolute of fixed - 在您向我们展示更多代码之前，任何人都可以提供帮助
请在您的问题中插入您的代码，格式正确，例如作为一个sn-p
@Andreas - 我更新了问题
好的，我为您编辑了问题并将您的代码转换为 sn-p

标签： html css radio-button background-image

【解决方案1】：

好的，设法解决了这个问题。我将位置作为样式放在包含单选按钮的 div 中

<div class="buton" style="position:absolute; left:400px; top:250px">
  <input type="radio" name="a" value="b" id="b" /> <label for="b"> radio text 2 </label>
</div>

【讨论】：