给input的直接父容器加position: relative，再对图标用absolute定位，并配合padding和border-radius调整right/top值；推荐父容器用flex布局实现垂直居中，图标设pointer-events: none避免遮挡输入。
input里面放搜索图标，为什么absolute定位后图标跑飞了
因为input默认不是position: relative容器，子元素用absolute会往上找最近的定位祖先，经常直接跑到body或父级div里去了。
必须给input的**直接父容器**加position: relative，而不是给input自己设——input不支持position设为relative（浏览器会忽略）。
- 父容器推荐用
div包裹input和svg/i，别把图标塞进input标签内部（HTML不允许） - 图标用
absolute时，top和right值要配合input的padding调整，否则会重叠或贴边太紧 - 如果父容器有
border-radius，图标right值建议略大于input内边距，避免圆角切掉图标
图标对齐总偏上/偏下，怎么微调才稳
图标垂直居中不能只靠top: 50% + transform: translateY(-50%)，因为input行高、字体大小、box-sizing都会影响基准线。
更可靠的方式是用flex布局控制父容器，或者用vertical-align: middle配合inline-block——但前提是图标是inline元素（比如svg或i）。
立即学习“前端免费学习笔记（深入）”；
- 推荐父容器设
display: flex; align-items: center;，图标设margin-left: 8px（或right配absolute），比纯absolute容错性高 - 如果坚持用
absolute，top: 50%后务必加transform: translateY(-50%)，且确保图标本身没有意外的margin或line-height -
input的height和line-height最好显式设置一致，避免不同浏览器渲染差异
移动端点击图标没反应，touch事件失效
图标是absolute定位的覆盖层，但默认pointer-events: auto，如果它挡住了input的右半区域，用户点那里就可能无法聚焦输入框。
常见错误是给图标加z-index却忘了处理交互穿透问题。
- 图标不需要响应点击？直接加
pointer-events: none，让点击穿透到input - 图标需要触发搜索？那就得保留
pointer-events: auto，并手动绑定click事件，再调用input.focus()或form.submit() - 真机测试时注意：iOS Safari 对
absolute图标的touchstart响应有时延迟，加cursor: pointer能轻微改善反馈感
IE11或旧版Edge里图标位置乱飘
老浏览器对flex、transform、甚至box-sizing的解析不一致，尤其当input设了width: 100%又套在弹性容器里时，absolute计算基准容易出错。
兼容方案不是“降级”，而是避开歧义点。
- 避免用
width: 100%+padding+absolute三者叠加；改用box-sizing: border-box并固定父容器width -
transform: translateY(-50%)在IE11里对svg可能偏移，换成top: calc(50% - 8px)（假设图标高16px）更稳 - 不用
rem或em设图标尺寸，老浏览器对根字体继承不一致，统一用px
最麻烦的不是写法，是图标和input的font-size、line-height、padding三者必须数值明确——模糊的相对单位在这里就是定时炸弹。
