如何让HTML登录页中多个div重叠并对齐输入框？

要实现标题<h2>、登录按钮与表单容器#box重叠，同时让输入框对齐的效果，可按以下步骤修改代码：

一、实现元素重叠效果 #

1. 调整标题容器定位 #

给包含<h2>的外层容器添加相对定位，让标题覆盖在表单容器顶部：

<!-- 修改h2的外层div，添加class用于定位 -->
<div class="h2-container" style="display:block; margin:0 auto;">
    <h2>Welcome</h2>
</div>

/* 标题容器定位，确保在表单容器上方 */
.h2-container {
  position: relative;
  top: 25px; /* 调整此值控制覆盖位置 */
  z-index: 1;
}

/* 移除#box的z-index: -1，避免被其他元素遮挡 */
#box{
    text-align: center;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.5s;
    height:auto;
    margin:0 auto;
    width: 25em;
    border-radius: 8px;
    background-color: #cbeef1;
    padding:10px 10px 10px 10px;
}

2. 调整登录按钮位置 #

让登录按钮向上移动，与表单容器底部重叠：

#box1{
  position: relative;
  top: -30px; /* 向上移动覆盖表单容器底部 */
  display: table;
  margin-left: auto;
  margin-right: auto;
}

二、实现输入框对齐 #

通过给标签设置固定宽度，让输入框从同一位置开始排列：

/* 给表单标签设置固定宽度并右对齐 */
#pid, #ppass {
  display: inline-block;
  width: 6em;
  text-align: right;
  margin-right: 10px;
  vertical-align: middle;
}

同时调整HTML中多余的换行，避免间距过大：

<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"><br>
    <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>
</div>

完整修改后代码 #

HTML代码 #

<div class="h2-container" 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"><br>
        <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>
    </div>
</div>
<div id="box1">
    <button id="login">Sign in</button>
</div>

CSS代码 #

.h2-container {
  position: relative;
  top: 25px;
  z-index: 1;
}

#box{
    text-align: center;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.5s;
    height:auto;
    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{
   position: relative;
   top: -30px;
   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;
}
#pid, #ppass {
  display: inline-block;
  width: 6em;
  text-align: right;
  margin-right: 10px;
  vertical-align: middle;
}

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