tabindex取值决定tab键顺序：-1不可tab聚焦但可js聚焦，0按dom位置自然加入，正数强制排序但易引发冲突；优先用0或focus()控制，避免正数硬编码。
直接改 tabindex 属性就能重排 Tab 键顺序，但必须注意：负值会让元素脱离顺序、0 值让它按 DOM 位置自然插入、正数才强制排序——用错值反而让可访问性变差。
tabindex 的三个取值含义完全不同
很多人以为只要设个数字就“能排”，其实 tabindex 的行为完全由数值符号和大小决定：
-
tabindex="-1"：元素不可通过 Tab 进入，但可通过.focus()主动聚焦（适合模态框关闭按钮、临时提示等） -
tabindex="0"：元素进入默认 Tab 流，顺序由它在 DOM 中的位置决定（最安全的“加入序列”方式） -
tabindex="N"（N > 0）：强制排到第 N 位，但所有正数会优先于0和无tabindex元素；多个正数之间按数值升序排列，而非声明顺序
设置正数 tabindex 时的常见翻车点
写 tabindex="1"、tabindex="2" 看似合理，实际容易引发隐性冲突：
- 浏览器会把所有
tabindex="1"元素全塞进第一个位置，再统一按 DOM 顺序聚焦（不是“只认第一个”） - 若页面已有原生可聚焦元素（如
<a href></a>、<button></button>），它们默认有隐式 tabindex=0，但一旦你加了tabindex="3"，它就会插在所有 0 和 -1 元素之后、所有其他正数之前 - React/Vue 等框架中动态渲染的元素，如果
tabindex写死为正数，DOM 插入顺序变化后极易导致焦点跳转错乱
更稳妥的 tab 顺序控制策略
除非明确需要跳过某段 DOM 区域，否则优先避免使用正数 tabindex：
- 对需要纳入 Tab 流的自定义组件（如
<div role="button">），统一设 <code>tabindex="0"，靠结构顺序自然组织 - 想跳过某元素？用
tabindex="-1"+ 显式element.focus()控制，别依赖负值“自动消失”——它仍能被 JS 聚焦，只是不进 Tab 流 - 真要跨区域调度焦点（比如表单提交后跳转到结果区），用
element.focus()手动触发，比硬编码tabindex="99"可靠得多
真正难的不是怎么写 tabindex，而是判断哪些元素该进 Tab 流、哪些该主动控制、哪些该彻底隔离——可访问性不是加属性，是做决策。
