HTML规范禁止input包含子元素，图标需用容器包裹并配合padding-right与absolute定位实现右对齐，同时设置父容器position:relative以确保z-index生效，并注意pointer-events和移动端光标偏移问题。
input 内部不能放绝对定位图标
直接把 <i class="icon-clear"></i> 塞进 <input> 标签内部是无效的——HTML 规范不允许 input 包含子元素，浏览器会自动忽略或剥离它。你看到的“图标在输入框里”，其实是 DOM 结构被修正后，图标被渲染到了 input 外部、又恰好被 CSS 拉到了视觉重叠位置，但此时它和 input 不在同一 stacking context 中，极易遮挡光标或文字。
右对齐图标必须靠 padding-right + 容器包裹
正确做法是让图标和 input 处于同一父容器（如 <div class="input-wrapper">），然后：
- 给
input设置padding-right，留出图标空间（比如padding-right: 32px） - 图标用
position: absolute定位到容器右内边距区域，right: 8px+top: 50%+transform: translateY(-50%) - 容器本身必须设
position: relative，否则绝对定位图标会相对于 body 锚定 - 图标元素加
aria-hidden="true"，避免屏幕阅读器误读
z-index 失效常因父容器没开启定位上下文
即使图标设置了 z-index: 999，如果它的父容器（.input-wrapper）没设 position: relative，这个 z-index 就不生效；更糟的是，如果父容器有 overflow: hidden 或 transform，还会隐式创建新层叠上下文，把图标“关”在局部层级里，永远盖不住 input 的文字。
常见错误现象：点击清空图标时，鼠标悬停无反馈、光标移到图标上就消失、输入长文本时文字被截断在图标左侧。
立即学习“前端免费学习笔记（深入）”；
移动端光标偏移与 Safari 兼容陷阱
纯 CSS 绝对定位图标在 iOS Safari 和部分安卓 WebView 中会导致光标定位不准——浏览器无法将点击坐标映射到 input 的实际可编辑区域。这不是 bug，而是规范行为：当非表单控件覆盖 input 可见区域时，焦点事件可能被拦截或错位。
规避方式：
- 图标区域设置
pointer-events: none（仅限纯展示图标） - 若需响应点击，改用
pointer-events: auto，但必须确保图标z-index高于 input，并且 input 自身不设z-index - 测试时务必在真机 Safari 和微信安卓版打开，模拟器无法复现光标偏移
最稳妥的路径不是硬调定位，而是用语义化结构（如 Bootstrap input-group）或框架自带的输入框封装——它们内部已处理了焦点穿透、可访问性和响应式对齐。
