I am working on positioning input fields over an image to allow data entry directly onto the image itself.
https://i.sstatic.net/jW4iM.png Currently, I have a series of input fields (shown above) and three images with different squares on them. My goal is to align the input fields within the squares. Below is the corresponding HTML/CSS code I am using. This is my first web development project, so any assistance or suggestions would be greatly appreciated.
.allapottab {
display: none;
text-align: right;
height: 850px;
}
.festekoptions {
width: 20px;
}<div style="text-align: center;" class="allapottab">Külsõ állapota:
<br>
<img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
<img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
<img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
<br>
/* Input fields go here */
<br>
<label for="seruleselony"><b>Sérülések/Előnyök:</b></label>
<input type="text" placeholder="Sérülések / Előnyök" name="seruleselony" id="seruleselony" required><br>
</div>