iOS移动端Safari/Chrome z-index失效侧边栏被内容覆盖问题

iOS端所有浏览器（包括Safari、Chrome）均使用系统自带WebKit内核，层叠上下文渲染逻辑和桌面端存在差异，你遇到的主体内容覆盖侧边栏问题，是典型的WebKit层叠上下文判定bug，按以下优先级修改即可解决：

• 抬升侧边栏最外层容器层级
  你当前给.pushNav设置的z-index: 10000仅作用在ul元素上，如果它的任意祖先元素存在transform、opacity<1、filter、overflow非visible属性，会创建独立层叠上下文，把子元素z-index限制在父容器内部，父容器层级低于主体内容的话，子元素z-index设再高都无效。
  直接给包裹侧边栏的<nav>标签添加以下样式：

  nav {
    position: relative;
    z-index: 99999;
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
  }
  

  其中translateZ属性会触发iOS硬件加速，把元素放到独立合成层，避免被普通流元素覆盖。
• 修复iOS下fixed定位失效问题
  iOS下仅给body设置overflow: hidden无法锁定滚动，会导致position: fixed元素在页面滚动时丢失固定定位，跟随文档流渲染。侧边栏打开时，同时给html、body标签加锁定类：

  html.nav-open,
  body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  

  侧边栏关闭时移除该类名即可。
• 给侧边栏补硬件加速属性
  你代码里的.burger按钮已经加了transform: translate3d触发合成层，如果页面主体内容里的元素也加了同类属性，在iOS下这些合成层默认渲染层级高于未触发硬件加速的fixed元素。给.pushNav补充以下样式，保持同一渲染层级：

  .pushNav {
    /* 保留原有样式，追加以下内容 */
    -webkit-transform: translateZ(200px);
    transform: translateZ(200px);
    -webkit-overflow-scrolling: touch;
  }
  

• 注意z-index阈值
  部分老版本iOS系统会把大于16777271的z-index值解析为auto，直接丢失层级效果，你当前设置的10000属于安全范围，不需要调整数值。

验证方式：修改后清空iOS端浏览器缓存，打开侧边栏时检查元素层叠顺序，只要侧边栏最外层nav容器的层级高于页面主体最外层容器，就不会出现覆盖问题。

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