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"> <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

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

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.