小屏端Sliding sidebar展开时被内容遮挡的解决方法

问题表现 #

屏幕宽度小于768px时，点击汉堡按钮弹出侧边栏，侧边栏从主内容下方滑出，被内容层完全遮挡，无法点击使用。
问题效果截图

故障原因 #

• 移动端断点下侧边栏设置了position: fixed定位，但没有配置z-index层级属性，DOM结构里侧边栏在主内容前面渲染，默认堆叠顺序低于后渲染的主内容区，所以会被盖住。
• 侧边栏的过渡属性写漏了时间单位，transition: 0.2 linear是无效值，会导致滑入动画卡顿/不生效。
• 汉堡菜单按钮同样没设置层级，极端场景下也可能被内容遮挡。

修复代码 #

直接替换768px宽度断点对应的媒体查询部分CSS即可：

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    z-index: 101; /* 保证汉堡按钮始终在最上层 */
  }
  .content {
    padding: 2rem;
    margin-top: 8rem;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear; /* 补全时间单位s，修复过渡动画 */
    z-index: 100; /* 侧边栏层级高于主内容，低于汉堡按钮 */
  }
  .sidebar.is-active {
    left: 0;
  }
}

改完刷新页面，侧边栏弹出时就会正常覆盖在主内容上方，滑入动画也能正常运行。

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