order仅控制Flex子元素视觉顺序，不影响z-index；生效前提为父容器设display:flex/inline-flex，且元素是直接子项、未脱离文档流；CSS变量需用calc()转数字；JS操作需注意字符串/数字一致性及重排优化。
order 属性不能控制“堆叠顺序”（z-index 那种），它只控制 Flex 容器内子元素的视觉排列顺序——也就是左→右或上→下谁先谁后。想调前后层叠关系，得用 z-index 或 transform: translateZ()。
为什么写了 order 却完全没反应
这不是值写错了，而是布局前提根本没成立：
- 父容器没设
display: flex或display: inline-flex—— 浏览器直接忽略order，连解析都不做 - 目标元素不是 Flex 容器的直接子元素，中间嵌了 wrapper div
- 误用了
display: grid，却指望order控制网格轨道位置（grid 里得靠grid-row/grid-column） - 子元素被设了
position: absolute或float，脱离文档流后就不再是 Flex 项目
用 CSS 变量动态设 order 必须过 calc() 这关
CSS 变量默认是字符串，而 order 只认整数。写成 order: var(--sort) 在 Chrome/Firefox/Safari 中都会回退为 order: 0。
正确写法只有两种可靠路径：
立即学习“前端免费学习笔记（深入）”；
order: calc(var(--sort) * 1)order: calc(var(--sort) + 0)
别用 order: var(--sort, 0) —— fallback 不解决类型问题；也别在 JS 里用 el.style.setProperty('--sort', '2') 然后指望 CSS 自动转数字，它不会。
JavaScript 动态改 order 的实操细节
直接操作 style.order 最稳，但要注意这些隐性坑：
-
getComputedStyle(el).order返回的是字符串（如"-1"），参与计算前必须parseInt() - 赋值时用字符串或数字都行：
el.style.order = "-1"和el.style.order = -1效果一致，建议统一用字符串避免隐式转换歧义 - 批量更新多个元素时，避免 forEach 逐个设——会触发多次重排。先算好所有
order值，再统一写入 DOM -
order不影响parent.children列表顺序，DOM 逻辑仍按 HTML 源码走；如果代码里依赖children[0]做判断，别被视觉顺序骗了
真正容易翻车的地方不在怎么写，而在改了 order 后还去监听 focus 或依赖屏幕阅读器朗读顺序——order 会同步改变 tab 键焦点流和可访问性树，但很多人测试时只看眼睛，不试键盘也不开 VoiceOver。
