如何反转整个网站所有元素的z-index层级顺序

没有浏览器原生配置可以直接翻转z-index的默认渲染规则，但有3种可落地的技术方案，按实现成本和适用场景区分：

• 全局CSS值反转（成本最低，适合z-index管控规范的项目）
  浏览器默认规则是定位元素z-index值越大，堆叠层级越靠上，反转逻辑本质就是把所有z-index值替换为「当前堆叠上下文内的最大z-index值 - 原z-index值」。
  如果项目本身用CSS变量统一维护z-index层级，改动只需要几行：

  /* 原z-index变量定义 */
  :root {
    --z-max: 1000; /* 全站最高z-index值 */
    --z-modal: 1000;
    --z-toast: 800;
    --z-popover: 500;
    --z-fixed-header: 100;
    --z-base: 1;
  }
  /* 反转后直接覆写变量值即可，无需改业务代码 */
  :root {
    --z-modal: calc(var(--z-max) - 1000);
    --z-toast: calc(var(--z-max) - 800);
    --z-popover: calc(var(--z-max) - 500);
    --z-fixed-header: calc(var(--z-max) - 100);
    --z-base: calc(var(--z-max) - 1);
  }
  

  如果项目里有大量散写的内联z-index、样式文件里的硬编码z-index，可以写个MutationObserver，监听DOM新增和样式变化，遍历所有position不为static的元素，读取实时计算的z-index值，直接给元素加内联样式覆写反转后的值即可，z-index为auto的元素不需要处理，这类元素默认按DOM顺序堆叠。
• 堆叠上下文3D变换反转（适合散写z-index多、不想改原有样式值的场景）
  利用CSS 3D渲染的层叠规则，通过Z轴偏移强制改变元素堆叠顺序，核心代码如下：

  html {
    transform-style: preserve-3d;
    perspective: 100000px;
  }
  * {
    /* JS动态读取元素z-index赋值给--reverse-z，值越大Z轴偏移越靠后 */
    transform: translateZ(calc(var(--reverse-z, 0) * -1px)) !important;
  }
  

  这个方案同样需要配合JS实时计算每个元素的z-index赋值给CSS变量，注意要给本身用transform做动画、做位移的元素加白名单跳过规则，避免影响原有交互。
• DOM顺序动态重排（适合纯展示类、交互简单的站点）
  同堆叠上下文下，DOM结构越靠后的元素默认堆叠层级越高，不需要依赖z-index。可以通过JS定时或者触发层叠变化时，遍历所有定位元素，按照z-index值从小到大排序，依次插入到对应堆叠上下文父节点的末尾，自然实现z-index越低越靠上的效果。这个方案侵入性最高，会破坏依赖DOM顺序的选择器、表单Tab键切换顺序、部分事件委托逻辑，非特殊场景不推荐用。

踩坑提示：所有方案都必须按独立堆叠上下文单独计算反转值。只要元素满足opacity<1、transform非none、filter非none、will-change含transform/opacity等条件，就会生成独立堆叠上下文，子元素的z-index只会在父元素内部生效，不能全页共用同一个最大z-index做计算，否则会出现父容器层级错乱、子元素无法跨父容器调整层级的问题。

内容的提问来源于stack exchange，提问作者TheCodingTentacle