根本原因是定位上下文缺失，必须用position: relative的父容器包裹input和图标，否则absolute图标会相对于body定位而飘移或消失；同时需设置足够padding-right并用top: 50%+transform垂直居中。
为什么图标总在input右边“飘”或“消失”
根本原因不是图标没写对，而是定位上下文缺失。position: absolute 的图标默认找最近的 position: relative 祖先；如果父容器没设，它就往上一直找到 <body>，位置完全失控。
- 必须用一个
<div class="search-box">包住<input>和图标（或伪元素），并给这个<div>加position: relative - 别给
<input>自身加position: relative——它是替换元素，在 Safari 和旧版 IE 里盒模型行为异常，容易导致图标偏移 - 如果用了
display: flex布局父容器，IE11 下align-items和子元素position: absolute共存会出问题，降级回position方案更稳
用 ::after 伪元素还是用 <svg> 标签放图标
伪元素轻量、不增加 DOM 节点，适合纯展示；<svg> 或 <i> 是真实节点，能绑定点击、支持状态样式、可动态改色——选哪个取决于要不要交互。
- 用
.search-box::after：必须配content: ""，用background-image或mask+background-color渲染图标，避免字体图标加载失败留白 - 用
<svg>：设width和height（别只设width，否则拉伸变形），推荐固定viewBox并设height: auto - 如果图标要清空输入内容或触发搜索，必须用真实标签，再加
cursor: pointer和 JS 监听，伪元素做不到
padding-right 不够会导致文字被盖住
这不是“看起来挤”，是实际输入体验断裂——用户打到最后几个字符时根本看不见。图标占的空间，必须由 <input> 主动让出来。
-
padding-right至少 = 图标宽度 + 右侧间隙（例如图标 20px + 间隙 8px →padding-right: 28px） - 绝对不要用
text-indent替代——它只缩进第一行，resize或换行后失效 - 移动端 iOS Safari 对内边距渲染有差异，务必加
box-sizing: border-box统一计算方式 - 图标垂直居中推荐
top: 50%+transform: translateY(-50%)，比line-height或vertical-align更可靠
点击图标不聚焦 input 怎么办
CSS 不能处理事件，但结构可以补足。用户点击图标却没反应，等于功能残缺。
立即学习“前端免费学习笔记（深入）”；
- 最简方案：把
<input>放进<label>里，图标作为<label>子元素，天然触发focus - 如果结构不允许（比如用了 Bootstrap
input-group），就给图标加onclick="document.querySelector('.my-input').focus()"，一行 JS 解决 - 注意：若图标是
<button>（如 Bootstrap 示例），要设type="button"，否则可能意外提交表单
真正麻烦的是兼容性细节：IE11 下 box-sizing 被重置、Safari 对 input 盒模型解析不一致、移动端点击热区太小……这些地方不测真机，上线准出问题。
