Как включить радио-кнопки над изображением? - PullRequest
Новая
       37

Как включить радио-кнопки над изображением?

0 голосов
/ 09 мая 2019

image where I want to place some radio buttons

Я хочу установить переключатель на каждую желтую метку. Я не могу понять, как правильно разместить каждую радиокнопку.

Я нашел похожие вопросы, где нет объяснения о том, как поставить переключатель в нужное место:

Поместить радио-кнопки поверх изображения

Сделать переключатели над фоновым изображением питания

позиционирование переключателей над фоновым изображением

Есть ли лучший способ сделать это? Может быть, используя JavaScript.

1 Ответ

2 голосов
/ 09 мая 2019

Надеюсь, что я не понял вашего вопроса.Размещение элементов на изображении требует только 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>
...