Z-index失效排查：导航为何无法显示在Header后方？

嘿，我来帮你捋捋这个z-index的问题——你遇到的情况其实是**堆叠上下文（stacking context）**在搞鬼！

问题根源拆解 #

你把红色的nav放在了蓝色header的内部，而header设置了position: fixed和z-index: 10，这直接给header创建了一个独立的堆叠上下文。在这个上下文里，所有子元素的z-index都是相对于header本身的——哪怕你给nav设z-index: 1，它也只会在header的堆叠层内部排序，绝对不可能跑到header的后面去。简单说就是：父元素的堆叠上下文会把所有子元素“包裹”在自己的层级里，子元素根本没法突破这个层级和外部元素比高低。

两种可行的解决方案 #

方案1：把nav移出header，设为同级元素（推荐）

让header和nav变成同级元素，这样它们就处于同一个堆叠上下文，z-index就能直接生效比较了。修改后的代码如下：

HTML

<header class="header">
  <button id="menuBtn">Toggle menu</button>
</header>
<nav id="navMenu" class="header__nav"></nav>

CSS

*{ 
  margin: 0; 
  padding:0; 
  box-sizing: border-box; 
} 
.header { 
  height: 100px; 
  width: 100%; 
  background-color: blue; 
  position: fixed; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 10; 
} 
.header__nav { 
  background: red; 
  height: 50px; 
  width: 100%; 
  position: fixed; /* 和header保持同定位方式 */
  left: 0; 
  top: 0; 
  transform: translateY(-50px); 
  transition: all 1s linear; 
  z-index: 9; /* 数值比header小，自然就会在后方 */
} 
.active { 
  transform: translateY(100px); 
} 

JS（保持不变）

const menuBtn = document.getElementById("menuBtn"); 
const navMenu = document.getElementById("navMenu"); 
menuBtn.addEventListener("click", () => { navMenu.classList.toggle("active"); }); 

方案2：调整header的堆叠上下文（不推荐，复杂度高）

如果一定要把nav留在header内部，那你需要取消header的z-index（让它不创建独立堆叠上下文），然后给nav设置负的z-index。但这种方式要求header不能有背景色（或者背景设为透明），否则还是会挡住nav，实用性远不如第一种方案，所以不推荐。

总结 #

核心问题就是父元素创建了独立堆叠上下文，子元素的z-index无法突破这个上下文跑到父元素后面。把nav移到header外面变成同级元素，就能让它们的z-index正常发挥作用，实现你想要的“从后方滑出”效果啦。

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