HTML/CSS 现代网页设计：如何将表单放置在图像上的绝对位置？

Question

在我网站的“联系人部分”中，我想创建一个位于图像上方的联系表单，但只有图像上方的一部分..就像这个例子一样：

这个容器应该在部分的中间并且灵活：我试过了但是我的表单没有超出下图的边界，而且如果我调整页面大小元素不会弯曲，知道我怎么能解决这个问题？这里的代码片段：

.contacts {
  display: flex;
  align-items: center;
}

.contacts-container {
  display: flex;
  margin: 11rem auto;
  position: relative;
}

.contacts-container img {
  height: 40rem;
  width: auto;
  background-size: cover;
}

.contacts-txt {
  position: absolute;
  top: 2rem;
  left: 13rem;
  color: #fff6e4;
  font-size: 3rem;
  text-transform: uppercase;
  font-family: inherit;
}

.contacts-txt2 {
  color: #fceecc;
}

/* ----- form ----- */

.contacts-form {
  position: absolute;
  background-color: #fceecc;
  bottom: -9rem;
  left: 20rem;
  box-shadow: 4px 6px 5px rgba(115, 115, 115, 0.102);
  padding: 2rem;
  font-size: 1.8rem;
  color: #333;
}

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;
}

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

<section class="contacts">
        <div class="contacts-container">
          <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird"  style="background-color: #f2a900;
" >
          <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>

Answer 1

你的主容器，

contacts

部分有

display: flex

这会阻止你在这里想要的行为。

您可以删除它，并且表格应该根据需要重叠并延伸到图像上。要使

contacts-container

在页面上居中，您可以尝试这样的操作：

.contacts {
  width: 100%;
}

.contacts-container {
  display: flex;
  margin: 11rem auto;
  position: relative;
  width: 50%;
}

但由于您还指定了现代 CSS，我认为网格容器在这里也很有用，特别是如果您的其余布局中有类似的元素。

Answer 2

当你在 css 中使用绝对定位时，元素是相对于文档的绝对定位，或者下一个最高的相对定位元素。例如：

<section class="relatively-positioned-el">
    <div class="absolutely-positioned-el">absolute relative to section</div>
</section>

.relatively-positioned-el {
    position: relative;
}
.absolutely-positioned-el {
    position: absolute;
    top: 0;
    left: 0;
}

div 将位于 section 元素的左上角。

所以，在你的情况下，如果你想为你的图像和你的表单有两个单独的元素，让你的联系人位置相对，就像这样：

.contacts {
  display: flex;
  align-items: center;
  position: relative;
}

然后使图像的 z-index 为 -1，使其位于表单后面，同时使表单容器的 z-index 为 0，如下所示：

img {
    position: absolute;
    z-index: -1;
}
.contacts-form {
   z-index: 0;
   position: absolute;
}