子菜单被隐藏，多次设置z-index无效，求问题排查指导

嘿，我特别理解你现在的困扰——之前用z-index搞定过类似的子菜单隐藏问题，现在不管用确实挺挠头的。咱们来一步步拆解问题：

先明确z-index生效的核心前提 #

z-index可不是随便加就有用的，它只对设置了非static定位的元素生效（也就是position值为relative、absolute、fixed或sticky的元素）。如果你的子菜单或者它的父元素还是默认的position: static，那加多少z-index都白搭。

排查你代码里的常见坑 #

结合你的场景，大概率是这两个问题之一：

1. 父元素没设置定位
   子菜单一般会用position: absolute来脱离文档流，但如果它的父元素（比如导航栏的li标签）是static定位，子菜单的定位基准会变成整个页面，而且z-index无法和父层级形成正确的堆叠关系。你需要给父元素加上：

   .nav li {
     position: relative;
   }
   

2. 父容器设置了overflow: hidden
   很多人为了处理导航栏的溢出会加overflow: hidden，但这个属性会把超出父容器范围的子菜单直接截断，看起来像是被其他元素盖住了，但其实和z-index没关系。你需要把父容器的overflow改成visible：

   .nav {
     overflow: visible;
   }
   

进阶排查：堆叠上下文的影响 #

如果上面两步都试过还是不行，那可能是堆叠上下文在搞鬼。比如你的父元素如果设置了transform、opacity、filter这类属性，会自动创建一个独立的堆叠上下文，子元素的z-index只能在这个上下文里生效，没法突破到外面。这时候你需要要么移除这些属性，要么调整父元素的z-index值来适配层级。

最后给你一个修复后的子菜单样式示例 #

.nav li {
  position: relative; /* 必须设置，让子菜单以它为基准定位 */
}

.nav li .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999; /* 设一个足够高的数值，确保盖过其他元素 */
  overflow: visible;
  display: none; /* 初始隐藏 */
}

.nav li:hover .submenu {
  display: block; /* hover时显示 */
}

你可以按照这个思路去调整你的代码，应该就能解决子菜单被隐藏的问题啦～

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