表单输入标签重叠问题求助：如何保留悬浮效果并修复重叠？

问题描述 #

第一个输入框（First name）的标签位置正常，但第二个输入框（Last Name）的标签和前者发生重叠。想要实现标签悬浮在输入框上方的效果，尝试移除.itemForm label的position:absolute属性但无效，求修复方法。

原代码 #

CSS #

.lineForm {
    display: flex;
    flex-direction: column;
}

.itemForm {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.itemForm input,
.itemForm select {
    width: 100%;
    padding: 26px 16px 10px 16px;
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 16px;
    font-size: 16px;
    color: #222222;
}

.itemForm label {
    font-size: 12px;
    color: #7B7B7B;
    position: absolute;
    top: 8px;
    left: 16px;
}

HTML #

<div class="contentForm">
    <div class="lineForm">
        <div class="itemForm">
            <div>
                <input id="firstname" name="Firstname" type="text" class="formInput" required="">
                <label for="nome">First name</label>
            </div>
            <div>
                <input id="lastname" name="Lastname" type="text" class="formInput" required="">
                <label for="sobrenome">Last Name</label>
            </div>                        
        </div>
        <div class="itemForm">
            <input id="tel" name="Telefone" value="(21) 00000-0000" type="tel" required="">
            <label>Telefone</label>
        </div>                     
    </div>        
</div> 

问题原因 #

.itemForm设置了position:relative，但包裹input和label的内层div没有设置相对定位，导致两个label都以.itemForm为定位基准，同时出现在容器左上角，造成重叠。另外label的for属性和对应input的id不匹配，会导致点击标签无法聚焦输入框。

修复方案 #

1. 给包裹input和label的内层容器添加position:relative，让每个标签都相对于自己的输入框容器定位；
2. 给内层容器设置宽度，配合flex布局让两个输入框平分空间；
3. 修正label的for属性，使其与对应input的id一致。

修改后的代码 #

CSS

.lineForm {
    display: flex;
    flex-direction: column;
}

.itemForm {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px; /* 两个输入框之间的间距 */
}

/* 给内层容器设置相对定位和宽度 */
.itemForm > div {
    position: relative;
    width: 50%;
}

.itemForm input,
.itemForm select {
    width: 100%;
    padding: 26px 16px 10px 16px;
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 16px;
    font-size: 16px;
    color: #222222;
}

.itemForm label {
    font-size: 12px;
    color: #7B7B7B;
    position: absolute;
    top: 8px;
    left: 16px;
}

HTML

<div class="contentForm">
    <div class="lineForm">
        <div class="itemForm">
            <div>
                <input id="firstname" name="Firstname" type="text" class="formInput" required="">
                <!-- 修正for属性为对应input的id -->
                <label for="firstname">First name</label>
            </div>
            <div>
                <input id="lastname" name="Lastname" type="text" class="formInput" required="">
                <!-- 修正for属性为对应input的id -->
                <label for="lastname">Last Name</label>
            </div>                        
        </div>
        <div class="itemForm">
            <div>
                <input id="tel" name="Telefone" value="(21) 00000-0000" type="tel" required="">
                <label for="tel">Telefone</label>
            </div>                     
        </div>
    </div>        
</div> 

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