嵌套Div中Lock图标CSS定位异常：聚焦时无法随输入框下移

问题核心在于两点：一是当前.backgr虽设了position: relative，但.wrapper无明确布局控制，导致.backgr高度未与包含输入框的.shit联动；二是.fa-lock用固定top: 20%定位，无法随父元素高度变化自动调整位置。

关键修改步骤： #

• 给.wrapper设置Flex布局，让.backgr和.shit横向排列且高度保持一致
• 让.fa-lock在.backgr内垂直居中，用相对父元素的动态定位替代固定百分比
• 确保输入框聚焦时的位移带动.shit高度变化，进而让.backgr同步变化，图标自然跟随

修改后的代码： #

CSS

.wrapper {
  position: relative;
  display: flex; /* 关键：子元素横向排列且高度对齐 */
  align-items: center; /* 垂直方向居中对齐 */
}

.backgr {
  position: relative;
  width: 15%;
  height: 100%; /* 继承wrapper高度，与shit保持一致 */
  margin-right: 8px;
}

.fa-lock {
  position: absolute;
  top: 50%; /* 相对于backgr垂直居中 */
  transform: translateY(-50%);
}

.shit {
  position: relative;
  flex: 1; /* 占据剩余宽度 */
}

.login_input {
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.2s ease;
}

.login_input:focus {
  transform: translateY(5px); /* 输入框聚焦下移 */
  outline: none;
}

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="backgr">
    <i class="fa fa-lock fa-2x"></i>
  </div>
  <div class="shit">
    <input id="password" class="login_input" type="password" placeholder="密码" name="password" />
    <i class="fa fa-eye-slash"></i>
  </div>
</div>

原理说明： #

1. Flex布局的作用：.wrapper设为display: flex后，.backgr和.shit自动等高，输入框聚焦下移时，.shit的高度变化会同步传递给.backgr
2. 动态居中定位：.fa-lock用top:50%+transform: translateY(-50%)，无论.backgr高度如何变化，图标始终保持垂直居中，自然跟随父元素下移
3. 定位父元素的选择：.backgr作为图标的直接父元素，是最适合的定位容器——它和输入框所在的.shit是同级元素，布局联动性最强

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