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

How do I make multiple divs overlap in my html login page?

This is my HTML form:

<div style="display:block; margin:0 auto;">
    <h2>Welcome</h2>
</div>
<div id="box">
    <div id="box2">
        <p id="pid"><b>Emp no:</b></p>
        <input type="text" id="id" size="30" maxlength="11" onkeypress="return event.charCode != 32">
        <p id="ppass"><b>Password:</b></p>
        <input type="password" id="pass" size="30" maxlength="30">&ensp;<i class="far fa-eye-slash"></i><br><br><br><br>
    </div>
</div>
<div id="box1">
    <button id="login">Sign in</button>
</div>

And this is my CSS:

#box{
    text-align: center;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.5s;
    height:auto;
    z-index: -1;
    margin:0 auto;
    width: 25em;
    border-radius: 8px;
    background-color: #cbeef1;
    padding:10px 10px 10px 10px;
}
#box2{
    display: inline-block;
    margin: 0 auto;
}
 
#box:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#box1{
   display: table;
   margin-left: auto;
   margin-right: auto;
}
#login{
    border-radius: 6px;
    cursor: pointer;
    font-size: medium;
    padding: 5px;
}
h2{
    background-color: aliceblue;
    font-size: medium;
    padding: 10px 10px 10px 10px;
    width: 5em;
    border-style: solid;
    margin: 0 auto;
    display:block;
}

This is my output:

My actual output

As you can see in the image above, I want the button and the h2 to overlap with the box div. I also want the input fields to start from the same point, like the image shown below:

What I expect

Please guide me, as to how to achieve this.

This is my runtime fiddle: click here

Tags:

2

Answers


  1. 0

    To achieve the desired layout, you can make use of the CSS position property. Here is an example CSS code that you can use:

        #box {
  position: relative;
  text-align: center;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s;
  height:auto;
  z-index: -1;
  margin:0 auto;
  width: 25em;
  border-radius: 8px;
  background-color: #cbeef1;
  padding:10px 10px 10px 10px;
}

#box2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#login {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

h2 {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: aliceblue;
  font-size: medium;
  padding: 10px 10px 10px 10px;
  width: 5em;
  border-style: solid;
  margin: 0 auto;
  display:block;
}

#id, #pass {
  display: block;
  margin: 0 auto;
}

    Explanation:

    The position: relative on the #box element sets it as the reference point for the absolute positioned child elements.

    • The #box2 element is centered within the #box element using the
      position: absolute, top: 50%, left: 50%, and transform:
      translate(-50%, -50%) properties.

    • The #login button is positioned at the bottom of the #box element
      using the position: absolute, bottom: -20px, left: 50%, and
      transform: translateX(-50%) properties.

    • The h2 element is positioned at the top of the #box element using the
      position: absolute, top: -20px, left: 50%, and transform:
      translateX(-50%) properties.

    • The #id and #pass input fields are centered within the #box2 element
      using the display: block and margin: 0 auto properties.

    With these changes, the button and the h2 should overlap with the box
    div and the input fields should start from the same point.

    Login or Signup to reply.
  2. 0

    Put the button and h2 inside the #box, then use negative margins to make them overlap.

    #box {
  text-align: center;
  margin: 2em auto 0;
  width: 25em;
  border-radius: 8px;
  background-color: #cbeef1;
  padding: 1em;
}

h2 {
  background-color: aliceblue;
  font-size: medium;
  padding: 10px;
  width: 5em;
  border-style: solid;
  margin: -2em 0 0 1em;
}

#login {
  border-radius: 6px;
  cursor: pointer;
  font-size: medium;
  padding: 5px;
}

#last {
  margin: 2em 0 -30px;
}
    <div id="box">
  <h2>Welcome</h2>
  <p><b>Emp no:</b></p>
  <p><input size="30" maxlength="11"></p>
  <p><b>Password:</b></p>
  <p><span style="visibility: hidden;">👁️ </span><input size="30" maxlength="30"> 👁️</p>
  <p id="last"><button id="login">Sign in</button></p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search