Html 如何使css项绝对位于父元素的位置？

我想在html输入中添加一个查看密码图标。为此，我添加了材质图标字体，并使用了其中一个组件。我将其嵌套在输入中，以便根据输入对其进行定位。我将输入的position属性设置为relative，将图标的position属性设置为absolute，但不知何故，它仍然相对于整个页面进行绝对定位。我怎样才能解决这个问题

.auth输入{ 文本对齐：左对齐； 填充：7px 10px； 背景色：f6f6f6； 边界：无； 边界半径：5px； 字号：1.05em； 宽度：100%； 位置：相对位置； } i、 材质图标{ 位置：绝对位置； 排名：0 } 可见度 .auth输入{ 文本对齐：左对齐； 填充：7px 10px； 背景色：f6f6f6； 边界：无； 边界半径：5px； 字号：1.05em； 宽度：100%； } .布局{ 位置：相对位置； } i、 材质图标{ 位置：绝对位置； 排名：0； 右：20px； z指数：1； } 可见度

---

输入中不能包含html。这是一个自动关闭标签。您需要将这两个元素放入一个容器中

.auth输入{ 文本对齐：左对齐； 填充：7px 10px； 背景色：f6f6f6； 边界：无； 边界半径：5px； 字号：1.05em； 宽度：100%； 位置：相对位置； } .auth输入{ 宽度：100%； } i、 材质图标{ 位置：绝对位置； 排名：0 } 可见度 把这两个包起来。见演示

.密码输入组{ 位置：相对位置； } .auth输入{ 文本对齐：左对齐； 填充：7px 10px； 背景色：f6f6f6； 边界：无； 边界半径：5px； 字号：1.05em； 宽度：100%； 位置：相对位置； } i、 材质图标{ 位置：绝对位置； 顶部：7px； 右：10px； } 可见度

---

对我来说，它仍然走到页面的末尾。输入没有结束标记，它不能保存任何标记。