CSS定位本身不破坏可访问性，但脱离语义结构、忽略阅读顺序或遮挡焦点流会严重影响屏幕阅读器和键盘用户；应优先使用flex/grid重排、正确管理焦点与隐藏状态、为定位组件添加语义属性。
CSS 定位（如 position: absolute、fixed、relative）本身不会直接破坏可访问性，但若脱离语义结构、忽略阅读顺序或遮挡焦点流，就会显著影响屏幕阅读器用户和键盘用户的操作体验。关键不在于“能不能用”，而在于“怎么用才不干扰无障碍访问”。
避免脱离文档流导致的阅读顺序错乱
绝对定位（position: absolute 或 fixed）会让元素脱离正常文档流，其在 DOM 中的位置可能与视觉呈现完全不一致。屏幕阅读器通常按 DOM 顺序朗读内容，若视觉上“标题在上方”，但 HTML 中它被写在页脚附近，再用 absolute 拉上去，用户听到的顺序就会混乱。
- 保持语义化 HTML 结构优先：标题、导航、主内容、侧边栏、页脚等应按逻辑顺序书写
- 如需视觉重排，优先考虑
flex或grid的order/grid-area，它们不改变 DOM 顺序，对辅助技术更友好 - 若必须用
absolute（如图标装饰、气泡提示），添加aria-hidden="true"并确保不包含重要文本或交互控件
确保键盘焦点不被隐藏或跳过
定位元素可能被 z-index 遮盖、被 visibility: hidden 或 opacity: 0 隐藏，却仍保留在焦点流中；也可能因 display: none 被移出焦点流，但视觉上又通过定位“强行显示”，造成焦点丢失。
- 用
display: none隐藏时，元素既不可见也不可聚焦——适合彻底移除的内容 - 用
visibility: hidden或opacity: 0隐藏时，元素仍占据空间且可被键盘聚焦——务必配合tabindex="-1"移出焦点流，或改用aria-hidden="true" - 模态框、下拉菜单等动态定位组件，打开时须将焦点限制在内部（
focus trap），关闭后恢复到触发点
慎用 transform 和 clip-path 做“隐藏”
仅靠 transform: translateX(-9999px) 或 clip-path 把内容移出视口，常被误当作“隐藏文本”的技巧，但部分屏幕阅读器（尤其旧版本）仍会朗读，且键盘焦点可能意外进入不可见区域。
立即学习“前端免费学习笔记（深入）”；
- 真正需要“视觉隐藏但保留可访问性”的场景（如“跳转到主内容”链接），使用经过验证的 .sr-only 类（含
clip,position: absolute,white-space: nowrap等组合） - 避免仅用
transform或scale(0)实现隐藏/显示切换，除非同步控制aria-hidden和tabindex - 动画中的定位变化（如侧边栏滑入）建议搭配
prefers-reduced-motion媒体查询降级，避免引发眩晕
定位组件要提供明确的语义和状态反馈
浮动工具栏、悬浮按钮、通知气泡等依赖定位的 UI 元素，往往缺乏上下文。屏幕阅读器用户不知道它“属于谁”、“何时出现”、“如何关闭”。
- 用
aria-labelledby或aria-describedby关联说明文字，例如悬浮按钮关联其功能描述 - 动态显示的弹层（如 tooltip）必须有
role="tooltip"，并用aria-live或aria-expanded反馈状态变化 -
固定定位的导航栏建议添加
role="navigation"和有意义的aria-label，避免被识别为普通div
定位不是可访问性的敌人，但脱离语义、忽略焦点、混淆顺序的定位才是。写 CSS 时多问一句：“键盘用户能顺畅到达这里吗？屏幕阅读器会按我期望的顺序读出来吗？”——答案比效果更重要。
