イメージにラジオボタンをたくさん置くにはどうすればいいですか？ （HTML、CSS）

Question

1つの画像に8つのラジオボタンが必要です。より具体的には、私はハワイ諸島のイメージを持っていたい。各島ごとに異なるラジオボタンがありますので、1つ選ぶことができます。ありがとうございました

Answer 1

絶対位置を使用する必要があります。

div { 
 
    height:400px; 
 
    width: 400px; 
 
    background: #124578; 
 
    position: relative; 
 
} 
 

 
#radio01 { 
 
    position:absolute; 
 
    left:0; 
 
    top:50%; 
 
} 
 

 
#radio02 { 
 
    position:absolute; 
 
    left:calc(100% - 25px); 
 
    top:25%; 
 
} 
 

 
#radio03 { 
 
    position:absolute; 
 
    left:50%; 
 
    top:70%; 
 
}

<div> 
 
    <form action=""> 
 
    <input type="radio" id="radio01" name="radio" /> 
 
    <input type="radio" id="radio02" name="radio" /> 
 
    <input type="radio" id="radio03" name="radio" /> 
 
    </form> 
 
</div>