使用CSS position定位无法将图片放入input输入框如何解决

核心原因有两点：

• 你的HTML结构里，眼睛图标和input是平级关系，都属于.password-container的子节点，你给input加position: relative根本没用——绝对定位元素只会向上找祖先级的非static定位元素当定位参考，平级元素不会成为参考对象。
• 作为两个元素共同父级的.password-container没有设置任何非static定位属性，设置了absolute的图标会一路向上查找，直到最外层的html根元素当参考，自然飘不对位置。

额外说一句：input是单标签元素，本身没法嵌套子节点，而且它属于可替换元素，就算你硬写语法错误的嵌套结构把图标塞input标签里，给input加relative也没法成为内部元素的定位参考。

1. 把定位参考设置到正确的父容器上
   把原本加在.main-input上的position: relative移到父容器.password-container上，同时给父容器设置和input一致的宽度，避免定位基准错位：

.password-container {
  position: relative;
  width: 60%; /* 和输入框预期宽度保持一致 */
  margin: 10px 0; /* 可以把原本input上的margin挪到父容器，避免边距计算异常 */
}

2. 调整input的内边距，避免输入文字遮挡图标
   你设置了direction: rtl，输入内容默认从右侧开始排布，建议把眼睛图标放在输入框左侧，给input左侧留足够的内边距：

.main-input {
  /* 删掉原代码里的position: relative和margin: 10px 0 */
  box-shadow: 0 0 20px 0 #00000025;
  background-color: #fff;
  border: none;
  outline: none;
  border-radius: 7px;
  /* 左内边距留45px放图标，右内边距保持30px即可 */
  padding: 17px 30px 17px 45px;
  width: 100%; /* 宽度改100%，整体宽度由父容器控制 */
  direction: rtl;
  transition: 0.5s;
}

3. 给图标设置具体偏移值，对齐到输入框对应位置

.password-show-icon {
  position: absolute;
  /* 垂直居中对齐 */
  top: 50%;
  transform: translateY(-50%);
  /* 距离输入框左边缘12px */
  left: 12px;
  /* 按设计需求设置图标大小 */
  width: 20px;
  height: 20px;
  cursor: pointer;
}

如果你需要把图标放在输入框右侧，只需要把样式里的left: 12px改成right: 12px，同时把input的padding左右值调换即可。

当前实现效果参考：

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