侧边子菜单被内容遮挡问题求助——z-index属性无效

嘿，我之前也碰到过一模一样的坑！z-index失效往往不是你设的值不够大，而是**堆叠上下文（stacking context）**在暗中搞鬼，咱们一步步排查解决：

1. 排查父元素的堆叠上下文陷阱 #

如果你的侧边菜单父元素设置了 position: relative/absolute/fixed/sticky 同时又加了非auto的z-index，那这个父元素就会创建一个独立的堆叠上下文——子菜单的z-index只能在这个上下文里生效，根本没法突破到外面去覆盖页面内容。

• 解决办法：要么移除父元素的z-index（如果不是必须的话），要么确保父元素的z-index值比页面内容容器的z-index更高。

2. 确认子菜单是定位元素 #

z-index只对非static定位的元素生效！如果你的子菜单还是默认的position: static，那不管设多大的z-index都没用。

• 解决办法：给子菜单加上 position: absolute 或者 relative，再设置一个足够大的z-index（比如z-index: 999）。

3. 检查父容器的overflow属性 #

如果侧边菜单的父容器设置了 overflow: hidden，那子菜单超出容器的部分会直接被裁剪，哪怕z-index再高也显示不出来。

• 解决办法：把父容器的overflow: hidden改成overflow: visible，或者调整子菜单的定位让它脱离这个容器（比如给父容器设position: relative，子菜单用absolute定位到容器外部）。

4. 警惕其他创建堆叠上下文的属性 #

除了定位+z-index，transform、filter、perspective这些属性也会触发新的堆叠上下文。如果侧边菜单的父元素用了这些属性，子菜单的z-index同样会被限制在这个上下文里。

• 解决办法：如果不需要这些属性就直接移除；如果必须保留，那就把子菜单的DOM结构移到这个父元素外面，脱离它的堆叠上下文。

示例代码参考 #

这里给你一个能正常生效的基础样式：

/* 侧边菜单容器 */
.sidebar {
  position: relative;
  /* 避免随意添加z-index，防止创建不必要的堆叠上下文 */
}

/* 子菜单 */
.submenu {
  position: absolute;
  z-index: 999; /* 现在这个z-index会基于页面全局堆叠上下文生效 */
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #eee;
}

/* 页面内容容器 */
.page-content {
  position: relative;
  z-index: 1; /* 确保比子菜单的z-index小 */
}

你可以对照这几点检查你的代码，大概率能找到问题根源。如果还是搞不定，把相关的HTML结构和CSS代码贴出来，我再帮你细查～

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