Question 44215 in Html Question posted in
Some basic documentation can be found here.

HTML/CSS modern web design: how to place a form in absolute position over an image?

in the "contacts section" of my site I would like to create a contact form that stays above an image, but only a part above it.. like in this example:

enter image description here

this container should be in the middle of the section and flexible: I tried but my form doesn’t go beyond the borders of the image below, and also if I resize the page the elements don’t flex, any idea how can I fix this? Here the code snippet:

.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>
Tags:

2

Answers


  1. 0

    Your main container, the contacts section has display: flex which is preventing the behaviour that you want here.

    You can remove that and the form should both overlap and extend over the image as you want. To keep contacts-container centered on the page you can try something like this:

    .contacts {
  width: 100%;
}

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

    But since you also specified modern CSS, I think a grid container can also be useful here, especially if you have similar elements in the rest of your layout.

    enter image description here

    Login or Signup to reply.
  2. 0

    when you use absolute positioning in css, the element is position absolutely relative to the document, or the next-highest-up relatively positioned element. For example:

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

    the div will be in the top left corner of the section element.

    so, in your case, if you want to have two separate elements for your image and your form, make your contacts position relative, like so:

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

    and then make the z-index of the image -1, so that it sits behind the form, while making the z-index of the form container 0, like so:

    img {
    position: absolute;
    z-index: -1;
}
.contacts-form {
   z-index: 0;
   position: absolute;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search