Позиции элементов радиокнопки над фоном image

Question

У меня есть обратное изображение и вы хотите поместить некоторые переключатели (круг переключателя будет скрыт, и появится только метка) рядом с красными треугольниками (как показано на рисунке 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>

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