如何实现将HTML表单移动到指定图片的上层对应位置？

问题原因 #

1. 你当前的<h2>Registration</h2>写在了.formcontainer容器外部，属于普通文档流元素，会排在图片下方，既没有显示在图片上层，也会干扰你对表单定位坐标的判断。
2. 如需确保表单层始终在图片上方，可补充z-index属性指定层叠优先级。
3. 额外说明：<input>是单标签，不需要写</input>做闭合，删除冗余闭合标签不影响运行效果。

修改方案 #

你可以直接把标题移入.formcontainer内部，再根据你想要的偏移量调整top和left数值即可，修改后的代码如下：

CSS代码

/* 承载图片和表单的容器 */
.container {
  position: relative;
  color: black;
}

/* 表单容器 */
.formcontainer {
  position: absolute;
  /* 这里数值可以根据你需要的位置自行调整 */
  top: 20px;
  left: 30px;
  z-index: 10;
}

HTML代码

<div class="container">
  <img src="https://picsum.photos/1000/600.jpg" class="body">
  <div class="formcontainer">
    <!-- 把标题移入表单容器，统一进行定位 -->
    <h2> Registration </h2>
    <form action>
      <label for="name">Name :</label> <br>
      <input type="text" name="name" value="Enter your name"><br>
      <label for="age">Age :</label> <br>
      <input type="number" name="age" min="1"><br>
      <label for="gender">Gender :</label> <br>
      <input type="radio" name="gender" value="male"> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <br>
      <label for="membertype">Types of membership :</label> <br>
      <select name="type">
        <option value="OneYr">1 Year</option>
        <option value="FiveYr" selected>5 Years</option>
        <option value="LifeTime">Life Time</option>
      </select>
      <br>
      <br/>
      <label for="interests">Interests :</label>
      <br>
      <input type="checkbox" name="interest" value="Bike"> Travel<br>
      <input type="checkbox" name="interest" value="Food"> Food<br>
      <input type="checkbox" name="interest" value="Shopping"> Shopping<br>
      <input type="checkbox" name="interest" value="Cars"> Cars<br>
      <br>
      <input type ="button" name="submit" value="Submit">
    </form>
  </div>
</div>

修改后表单和标题会统一显示在图片上层，你可以自行调整top和left的数值，把表单挪到你想要的位置即可。

内容的提问来源于stack exchange，提问作者Nix