如何设置CSS position/display属性使输入框不受标签布局影响

先修正原代码的两个显性问题：

• 两个元素写了重复的id，不符合HTML规范
• label的for属性值和输入框的id不匹配，会导致点击标签无法自动聚焦输入框

推荐方案：弹性盒布局（无布局偏移、维护成本最低） #

不需要写复杂的定位、浮动属性，直接给父容器设置弹性盒纵向排列，天然实现标签在上、输入框在下，二者自动沿左边缘对齐，输入框完全不会受标签布局的异常影响。
修正后的完整代码：

<div class="align-left">
  <label for="username">Align label left</label>
  <input type="text" id="username" name="name" maxlength="100" required>
</div>

对应样式：

.align-left {
  display: flex;
  /* 子元素纵向排列：标签在上，输入框在下 */
  flex-direction: column;
  /* 子元素沿左边缘对齐 */
  align-items: flex-start;
  /* 按需调整标签和输入框的间距 */
  gap: 6px;
}

备选方案：绝对定位脱离文档流 #

如果你明确要用position属性让标签脱离普通文档流、不占用输入框的布局位置，按下面的写法实现：

.align-left {
  /* 父容器设置相对定位，作为绝对定位标签的参照基准 */
  position: relative;
  /* 顶部预留出标签的显示空间，避免标签和输入框重叠 */
  padding-top: 22px;
}
.align-left label {
  /* 标签脱离文档流，不会影响输入框的布局位置 */
  position: absolute;
  top: 0;
  left: 0;
}

注意：这个方案需要手动维护顶部预留的间距值，如果标签字体大小、行高调整，就得同步修改内边距，适配成本比弹性盒方案高。

内容的提问来源于stack exchange，提问作者Exit Code 1