如何在窗口调整大小时固定表单输入框内图标的位置

问题原因 #

你当前图标位移的核心问题有两点：

• 图标定位的left属性用了百分比单位，会跟随父容器宽度变化动态调整位置
• 图标和输入框没有共同的定位父级，relative定位是相对于元素自身原来的文档流位置，窗口尺寸变化时文档流布局变动，图标位置自然会偏移

修复方案 #

第一步：调整HTML结构 #

给每组「输入框+图标」套一个独立父容器，作为图标定位的基准：

<form id="form-container">
  <h1 id="linklist">Register</h1>
  <div class="input-group">
    <i class="fas fa-user" id="username-logo"></i>
    <input type="text" name="username" id="username" placeholder="Username" required="required">
  </div>
  <div class="input-group">
    <i class="fas fa-lock" id="password-logo"></i>
    <input type="password" name="password" id="password" placeholder="Password" required="required">
  </div>
  <div class="input-group">
    <i class="fas fa-envelope" id="email-logo"></i>
    <input type="email" name="email" id="email" placeholder="Email" required="required">
  </div>
  <input type="submit" name="submit" id="submit" value="Register">
</form>

第二步：替换原有CSS #

删掉你原来写的三个图标单独的CSS，改用下面的公共样式：

/* 输入组作为定位父级 */
.input-group {
  position: relative;
  margin-bottom: 20px; /* 可自行调整输入项之间的间距 */
}

/* 输入框统一加左侧内边距，给图标预留位置 */
.input-group input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  box-sizing: border-box; /* 避免padding撑大输入框宽度 */
}

/* 图标统一绝对定位，固定在输入框左侧 */
.input-group i {
  position: absolute;
  left: 12px; /* 固定像素值，不会随窗口宽度变化 */
  top: 50%;
  transform: translateY(-50%); /* 自动垂直居中，无需写死top值 */
  color: #999; /* 可自行调整图标颜色 */
}

修复后图标始终相对于当前输入框定位，无论窗口如何调整都不会发生位移，同时也避免了输入文字和图标重叠的问题。

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