图标跑到页面顶部或左上角的根本原因是容器未设 position: relative，导致 absolute 定位的图标回溯到 body；必须用 position: relative 的 .search-box 包裹 input 和图标，并通过 .search-box::after 实现伪元素图标，同时 input 需设置足够 padding-right 以避免文字被遮挡，点击图标聚焦需借助 label 语义化或真实可绑定事件的元素。
为什么图标总跑到页面顶部或左上角？
根本原因是没给容器设 position: relative。position: absolute 的图标会逐级向上找最近的「已定位祖先」，如果找不到，就落到 body 上——于是图标飘在屏幕左上角，和 input 完全无关。
- 必须用一个
<div class="search-box">包住<input>和图标（不能直接用<input>自身设relative，它是替换元素，Safari 里容易错位） -
.search-box { position: relative; }这一行不能省，它是整个定位体系的锚点 - 图标本身用
.search-box::after实现最稳妥，不增 DOM、不干扰表单聚焦逻辑
伪元素图标怎么写才真正生效？
::after 必须带 content: ""，否则浏览器压根不渲染；也不能挂到 input::after 上——<input> 是自闭合标签，不支持伪元素。
- 正确写法：
.search-box::after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("search.svg") no-repeat center / contain; } - 别用
font-icon或<i>标签塞进 HTML：字体加载失败时图标变空白，且点击不会自动聚焦 input - 如果要用 SVG 内联，也得挂到
.search-box::after上，用background-image或mask方式，避免 DOM 干扰
文字被图标挡住怎么办？
没留右内边距是常见体验断层：用户输入时看不到最后几个字符，不是“有点挤”，而是功能失效。
-
input必须加padding-right，值 ≥ 图标宽度 + 右侧间隙（比如图标 16px + 8px 间距 →padding-right: 24px） - 禁用
text-indent代替：它只缩进首行，resize或换行后立即失效 - 移动端注意：iOS Safari 对
input内边距渲染略窄，统一加box-sizing: border-box防意外
点击图标怎么让 input 自动聚焦？
CSS 无法处理事件，但结构可以补足。最简方案是靠语义化 HTML，而不是 JS。
立即学习“前端免费学习笔记（深入）”；
- 把
<input>套进<label>里，图标作为label的子元素（哪怕只是label::after），点击即聚焦 - 如果必须用
div.search-box结构，就给图标加cursor: pointer，再配一行 JS：document.querySelector(".search-box::after").addEventListener("click", () => input.focus());—— 但注意：伪元素无法直接绑定事件，实际需用真实元素或委托 - 更推荐：用
<button type="button" class="search-icon"></button>替代伪元素，显式绑定click，可控性更强
