left: -9999px 通过将元素移出可视区但保留在文档流中实现隐藏，屏幕阅读器和键盘焦点仍可访问；需配合 absolute 定位、top: -9999px、width/height 限制及 focus 回归处理，clip-path: inset(100%) 是更现代的替代方案。
left: -9999px 为什么能隐藏元素但又保持可访问性
它把元素从可视区域拽走，但没脱离文档流，屏幕阅读器仍能读取，键盘焦点也能到达——这是它和 display: none 或 visibility: hidden 的本质区别。常用于“视觉隐藏但语义保留”的场景，比如跳转链接、搜索框的占位标签。
- 必须配合
position: absolute或position: fixed，否则left不生效 - 仅靠
left: -9999px不够：元素可能被父容器裁剪（overflow: hidden），或在缩放/高DPI下意外露出，需补全top: -9999px和width: 1px等限制 - 负值别瞎写 -999999px：部分浏览器对极大负坐标有渲染异常，-9999px 是经多年验证的稳妥阈值
用 clip-path 替代 left: -9999px 更现代也更可靠
clip-path: inset(100%) 能真正“裁掉”元素，不依赖定位上下文，也不怕父级 overflow 干扰，且支持 CSS 动画过渡。但它在 IE 和旧版 Safari 中完全不支持。
- 安全写法是双保险：
position: absolute; clip-path: inset(100%); - 避免只写
clip-path: circle(0)：某些安卓 WebView 渲染不稳定 - 若需兼容 IE，只能退回
left: -9999px+top: -9999px+width: 1px+height: 1px组合
absolute 定位后元素脱离文档流，但隐藏逻辑不能只靠位置
很多人以为设了 position: absolute 和 left: -9999px 就万事大吉，结果发现元素还在页面上“占位”或被意外显示——根本原因是没切断它和父容器的定位关系或尺寸继承。
- 父容器若没设
position: relative（或其它非static值），absolute元素会往上找最近的定位祖先，可能飞到意想不到的位置 - 记得加
white-space: nowrap：长文本在极窄宽度下可能折行，导致部分内容漏出可视区 - 不要省略
overflow: hidden在父级：某些 flex 容器或 transform 祖先会重置裁剪行为
无障碍测试时容易忽略的焦点陷阱
用 left: -9999px 隐藏的元素，键盘 Tab 还能聚焦进去，但如果没处理 :focus 样式，用户会卡在看不见的地方，且无视觉反馈。
- 务必加
&:focus { position: static; width: auto; height: auto; left: 0; top: 0; }让聚焦时回归可视区 - 如果该元素本就不该被键盘聚焦（比如纯装饰图标），直接加
tabindex="-1" - 用 Chrome DevTools 的“Rendering > Emulate vision deficiencies”检查是否真被隐藏，别只信肉眼
top、忘了防折行、忘了焦点回归，问题就会在某个缩放比例或某台旧手机上突然冒出来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
