如何使用CSS将input输入框精准定位排列到图片对应方框内部

你可以通过相对定位+绝对定位的布局方式实现输入框精准对齐图片上的方框，优化后的代码如下：

CSS 代码 #

.allapottab {
  text-align: center;
  height: auto;
}
/* 单张图片的父容器，设置相对定位作为输入框的定位基准 */
.img-group {
  position: relative;
  display: inline-block;
  margin: 10px 0;
}
.festekoptions {
  width: 20px;
  /* 输入框设置绝对定位，后续根据方框位置调整top和left值即可 */
  position: absolute;
  border: 1px solid #ccc;
  background: rgba(255,255,255,0.9);
}
/* 示例：给每个输入框单独设置定位参数，你可以根据实际方框位置修改数值 */
#festek1 {
  top: 20px;
  left: 30px;
}
#festek2 {
  top: 20px;
  left: 70px;
}
/* 剩余输入框参照上方格式依次调整top和left参数即可 */

HTML 代码 #

<div class="allapottab">
  Külsõ állapota:
  <br>
  <!-- 第一张图片容器，属于这张图的输入框都放在该容器内 -->
  <div class="img-group">
    <img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
    <input class="festekoptions" type="number" name="festek1" id="festek1" required>
    <input class="festekoptions" type="number" name="festek2" id="festek2" required>
    <!-- 其余属于第一张图的输入框依次放在此处 -->
  </div>
  <br>
  <!-- 第二张图片容器，属于这张图的输入框都放在该容器内 -->
  <div class="img-group">
    <img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
    <input class="festekoptions" type="number" name="festek11" id="festek11" required>
    <input class="festekoptions" type="number" name="festek12" id="festek12" required>
    <!-- 其余属于第二张图的输入框依次放在此处 -->
  </div>
  <br>
  <!-- 第三张图片容器，属于这张图的输入框都放在该容器内 -->
  <div class="img-group">
    <img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
    <input class="festekoptions" type="number" name="festek21" id="festek21" required>
    <input class="festekoptions" type="number" name="festek22" id="festek22" required>
    <!-- 其余属于第三张图的输入框依次放在此处 -->
  </div>
  <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>

调试技巧 #

打开浏览器控制台（按F12唤出），选中对应输入框元素，直接修改top和left数值可以实时预览对齐效果，调整到合适位置后将最终数值写入CSS文件即可。输入框添加半透明白色背景可以避免图片底色干扰输入内容的可读性，同时输入框和对应图片绑定在同一个父容器内，后续调整页面布局时相对位置也不会错乱。

内容的提问来源于stack exchange，提问作者Daniel H.