现代网页设计：如何实现图片上方绝对定位的自适应联系表单？

问题说明 #

需要在网站「联系板块」实现表单覆盖在图片上方的效果，要求容器居中且具备自适应能力。当前存在两个问题：

• 表单无法超出图片容器边界
• 页面缩放时元素错位，不具备自适应能力

问题根源 #

1. 使用固定rem值定位元素，无法随屏幕宽度调整位置
2. 图片设置固定高度，小屏幕下比例失调，容器高度受限
3. 未对表单设置最大宽度，小屏幕下表单过宽影响体验

修改后的代码 #

CSS 部分 #

/* 基础布局：让整个联系板块居中，限制最大宽度 */
.contacts {
  display: flex;
  justify-content: center;
  padding: 11rem 2rem; /* 左右内边距适配小屏幕 */
}

.contacts-container {
  position: relative;
  width: 100%;
  max-width: 1200px; /* 限制最大宽度，避免大屏幕过宽 */
  padding-bottom: 12rem; /* 预留表单超出图片的空间，避免遮挡下方内容 */
}

/* 图片自适应：保持比例，填满容器宽度 */
.contacts-container img {
  width: 100%;
  height: auto;
  min-height: 400px; /* 确保小屏幕下有足够高度 */
  object-fit: cover; /* 保持图片比例，避免拉伸 */
  background-color: #f2a900;
}

/* 标题定位：使用百分比+transform实现自适应居中 */
.contacts-txt {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff6e4;
  font-size: clamp(2rem, 4vw, 3rem); /* 响应式字体大小 */
  text-transform: uppercase;
  font-family: inherit;
  text-align: center;
}

.contacts-txt2 {
  color: #fceecc;
}

/* 表单样式：自适应定位+最大宽度限制 */
.contacts-form {
  position: absolute;
  background-color: #fceecc;
  bottom: -8rem; /* 向上调整，让表单部分覆盖图片 */
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 4px 6px 5px rgba(115, 115, 115, 0.102);
  padding: 2rem;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: #333;
  width: 90%;
  max-width: 500px; /* 限制表单最大宽度 */
  border-radius: 4px;
}

/* 表单元素样式保持不变，优化细节 */
input[type="text"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type="submit"] {
  background-color: #f2a900;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 1.8rem;
  cursor: pointer;
  transition: color 0.3s ease; /* 添加过渡动画 */
}

input[type="submit"]:hover {
  color: #fceecc;
}

HTML 部分 #

<section class="contacts">
  <div class="contacts-container">
    <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="联系板块背景图">
    <div class="contacts-txt">
      contact <span class="contacts-txt2">us</span>
    </div>

    <div class="contacts-form">
      <form action="action_page.php">
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
        <label for="subject">Subject</label>
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:100px"></textarea>
        <input type="submit" value="Submit">
      </form>
    </div>
  </div>
</section>

关键修改点 #

• 用clamp()实现响应式字体大小，适配不同屏幕
• 图片改为宽度100%+自动高度，配合object-fit: cover保持比例
• 标题和表单使用left:50% + transform: translateX(-50%)实现自适应居中，替代固定left值
• 给容器添加padding-bottom，避免表单遮挡下方内容
• 表单设置max-width，确保小屏幕下的可读性

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