清除按钮飘到左上角是因为父容器未设position: relative，导致absolute定位以body为基准；必须用search-wrapper包裹input和按钮并设relative，按钮再用absolute+right: 8px和top: 50%+transform居中。
清除按钮总飘到页面左上角？因为没设 position: relative 父容器
这是最常踩的坑：只给清除按钮加 position: absolute，但包裹它的 <div> 没设 position: relative。浏览器会一路往上找最近的非 static 祖先，最终以 <body> 为基准——按钮就飞到视口左上角了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须用一个
<div class="search-wrapper">同时包裹<input>和清除按钮（不能直接把按钮塞进<input>） - 这个
<div>要显式设position: relative，哪怕它本身不需要偏移 -
<input>是替换元素，position: relative在它身上基本无效，别试 - 用开发者工具检查按钮的
offsetParent，确认参考容器是不是你预期的那个<div>
right: 0 为什么按钮被切掉一半？
right: 0 是相对于父容器的 border box 右边缘计算的，不是内容区右边界。如果父容器有 padding-right，按钮就会被挤出去；如果 <input> 自身有 padding-right 但没预留空间，图标也会被遮住。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
right: 8px而不是right: 0，留出安全间距 -
<input>必须配padding-right: 32px（至少比按钮宽多 4px），防文字被盖 - 按钮自身设
top: 50%+transform: translateY(-50%)垂直居中，别依赖line-height - 移动端慎用固定像素值，可改用
right: calc(100% - 48px)配合min-width
type="search" 的原生清除按钮怎么控制位置？
Chrome/Safari/Edge 对 type="search" 输入框自动渲染清除按钮，但默认样式不可控，且 Firefox 完全不显示。想统一位置和外观，得靠伪元素干预。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须用
input[type="search"]::-webkit-search-cancel-button，其他浏览器不识别 - 先设
-webkit-appearance: none清掉默认样式 - 用
background内联 SVG 替换 × 图标，避免额外请求 - Firefox 需单独处理：加
appearance: searchfield或退化为手动按钮方案 - 该伪元素只在输入框有值且聚焦时才渲染，JS 清空后要触发
input事件而非change
手动按钮和原生按钮混用时 z-index 失效？
绝对定位按钮的 z-index 只在同级兄弟元素中生效。如果父容器没设 position 和 z-index，再高的子级值也会被隔壁区块盖住——尤其在弹窗、下拉菜单等叠加场景下。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
.search-wrapper加position: relative和z-index: 1（哪怕只是 1） - 清除按钮设
z-index: 2，确保它浮在<input>上层 - 避免在 flex 或 grid 容器里直接套 absolute 按钮——它们可能隐式创建新的 stacking context
- 真要跨组件叠放（比如搜索框在导航栏里），得检查整条 DOM 链上的
z-index和position设置
实际项目里最容易被忽略的，是父容器的 overflow: hidden ——它会直接裁掉超出部分的绝对定位按钮，连 z-index 都救不回来。
