@media大屏场景下CSS z-index失效：overlay未置于navbar下方求助

问题根源：堆叠上下文（Stacking Context）不一致 #

小屏正常、大屏失效，基本是大屏模式下Navbar或者Overlay所在的父元素触发了新的堆叠上下文，导致两者的z-index没法在同一层级比较。常见触发场景：

• 大屏时Navbar设置了position: relative/absolute/fixed+非auto的z-index，自行形成独立堆叠上下文
• Overlay的父元素带有transform、opacity、filter这类属性，创建了子堆叠上下文，导致Overlay的z-index仅在父元素内部生效

具体修复方法 #

1. 给Navbar明确设置层级，确保与Overlay同堆叠上下文
   大屏模式下，给Navbar设置比Overlay更高的z-index，同时保证它的父元素未创建额外堆叠上下文：

   @media (min-width: 768px) {
     .navbar {
       position: relative; /* 必须设置非static的position，z-index才会生效 */
       z-index: 100; /* 数值需大于Overlay的z-index */
     }
   }
   

2. 清理Overlay父元素的堆叠上下文触发属性
   检查Overlay的直接父元素，移除transform: translate(0)、opacity: 0.99这类容易忽略的触发属性：

   /* 错误示例：父元素触发堆叠上下文，Overlay的z-index仅在父级内部生效 */
   .overlay-wrap {
     /* transform: translateY(0); 移除该属性 */
     /* opacity: 0.8; 移除该属性 */
   }
   
   /* 确保Overlay能参与全局堆叠对比 */
   .overlay {
     position: fixed; /* 或absolute，不能是默认的static */
     z-index: 50; /* 数值小于Navbar的z-index即可 */
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.5);
   }
   

3. 用浏览器工具验证堆叠上下文层级
   打开Chrome/Firefox开发者工具，在Elements面板选中Navbar和Overlay，查看Computed面板的Stacking Context项，确认两者是否属于同一根堆叠上下文。若Navbar处于子堆叠上下文、Overlay在外部，即使Overlay z-index更低也会显示在上方。

常见踩坑点 #

• 不要给body/html设置z-index，会破坏根堆叠上下文，导致内部元素层级对比混乱
• 大屏用flex/grid布局Navbar本身不会触发堆叠上下文，但搭配position+z-index就会触发
• 小屏正常是因为此时Navbar和Overlay处于同一堆叠上下文，z-index可直接对比

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