CSS定位如何实现输入框内的搜索图标

图标跑到页面顶部或左上角的根本原因是容器未设 position: relative，导致 absolute 定位的图标回溯到 body；必须用 position: relative 的 .search-box 包裹 input 和图标，并通过 .search-box::after 实现伪元素图标，同时 input 需设置足够 padding-right 以避免文字被遮挡，点击图标聚焦需借助 label 语义化或真实可绑定事件的元素。

为什么图标总跑到页面顶部或左上角？

根本原因是没给容器设 position: relative。position: absolute 的图标会逐级向上找最近的「已定位祖先」，如果找不到，就落到 body 上——于是图标飘在屏幕左上角，和 input 完全无关。

1. 必须用一个 <div class="search-box"> 包住 <input> 和图标（不能直接用 <input> 自身设 relative，它是替换元素，Safari 里容易错位）
2. .search-box { position: relative; } 这一行不能省，它是整个定位体系的锚点
3. 图标本身用 .search-box::after 实现最稳妥，不增 DOM、不干扰表单聚焦逻辑

伪元素图标怎么写才真正生效？

::after 必须带 content: ""，否则浏览器压根不渲染；也不能挂到 input::after 上——<input> 是自闭合标签，不支持伪元素。

1. 正确写法：.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; }
2. 别用 font-icon 或 <i> 标签塞进 HTML：字体加载失败时图标变空白，且点击不会自动聚焦 input
3. 如果要用 SVG 内联，也得挂到 .search-box::after 上，用 background-image 或 mask 方式，避免 DOM 干扰

文字被图标挡住怎么办？

没留右内边距是常见体验断层：用户输入时看不到最后几个字符，不是“有点挤”，而是功能失效。

1. input 必须加 padding-right，值 ≥ 图标宽度 + 右侧间隙（比如图标 16px + 8px 间距 → padding-right: 24px）
2. 禁用 text-indent 代替：它只缩进首行，resize 或换行后立即失效
3. 移动端注意：iOS Safari 对 input 内边距渲染略窄，统一加 box-sizing: border-box 防意外

点击图标怎么让 input 自动聚焦？

CSS 无法处理事件，但结构可以补足。最简方案是靠语义化 HTML，而不是 JS。

1. 把 <input> 套进 <label> 里，图标作为 label 的子元素（哪怕只是 label::after），点击即聚焦
2. 如果必须用 div.search-box 结构，就给图标加 cursor: pointer，再配一行 JS：document.querySelector(".search-box::after").addEventListener("click", () => input.focus()); —— 但注意：伪元素无法直接绑定事件，实际需用真实元素或委托
3. 更推荐：用 <button type="button" class="search-icon"></button> 替代伪元素，显式绑定 click，可控性更强

图标位置精准与否，取决于容器是否真正“锁定”了定位上下文；而交互是否完整，取决于你有没有把点击意图转化成 DOM 可响应的行为。这两点漏掉任意一个，搜索框就算视觉上做完了，实际仍算半成品。