移动端浏览个人作品集页面时Z-index层级异常问题求助

这种z-index调了却没用的情况我太熟了！十有八九是**堆叠上下文（stacking context）**在暗中作祟——不是你z-index设得不够高，而是元素的堆叠层级被父级的上下文限制了。我给你拆解几个最常见的原因和解决办法：

1. 先确认导航栏是「定位元素」 #

z-index只对非static定位的元素生效！如果你的导航栏还是默认的position: static，哪怕你设z-index: 99999都白搭。先给导航栏加上定位属性：

.navbar {
  position: fixed; /* 或者 relative/sticky，根据你的布局需求选 */
  z-index: 9999; /* 这个值只要比#home相关元素的层级高就行 */
}

2. 检查父元素的堆叠上下文 #

如果导航栏已经是定位元素，但还是被遮挡，那就要看它的父级元素有没有创建独立的堆叠上下文。以下这些属性会让元素创建堆叠上下文：

• position 设为 relative/absolute/fixed/sticky 且 z-index 不为 auto
• transform 不为 none
• opacity 小于 1
• filter 不为 none
• isolation: isolate

举个典型的坑：如果导航栏的父容器加了position: relative; z-index: 1，那导航栏的z-index只会在这个父容器的堆叠上下文里生效，哪怕设得再高，也没法突破父级的层级。这时候你要么：

• 移除父容器不必要的堆叠上下文属性（比如把z-index改成auto，或者去掉多余的transform）
• 把父容器的z-index设得比#home所在的堆叠上下文更高

3. 排查#home区块的堆叠情况 #

反过来看看#home区块有没有触发堆叠上下文：比如它是不是加了transform做动画，或者opacity调过？这些属性会让#home自己成为一个堆叠上下文，哪怕导航栏的z-index更高，也可能被它挡住。你可以临时移除这些属性测试一下，如果问题消失了，就调整#home的层级或者改用其他实现方式。

4. 别忽略overflow的坑 #

如果导航栏是fixed定位，还要检查它的父元素有没有设overflow: hidden——这个属性会把固定定位的子元素也给裁剪掉，看起来就像是被#home遮挡了，其实是被父容器“藏”起来了。

终极调试工具：Layers面板 #

Chrome DevTools里的「Layers」面板（在More Tools里能找到）能直观展示页面所有元素的堆叠层级，你可以清楚看到导航栏和#home的堆叠顺序，以及它们所属的堆叠上下文，一下子就能定位问题出在哪。

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