HTML元素层级异常求助：导航在表单后方，z-index调整无效

针对你遇到的两个层级显示问题，我来逐一拆解原因和可行的解决方案：

问题一：元素位于header上方但在main区块后方，z-index调整无效 #

首先得敲个重点：z-index只对设置了非static定位（比如position: relative/absolute/fixed/sticky）的元素生效。如果你的目标元素没加任何定位属性，哪怕写了z-index: 9999也不会有效果。

如果已经加了定位还是无效，那十有八九是堆叠上下文在搞鬼：

• 检查你的main元素是不是设置了position: relative/absolute+z-index（哪怕z-index值是0），这会让main创建一个独立的堆叠上下文——里面的子元素不管z-index设多高，都只能在main内部的层级里排序，没法突破到main外面的header层级。
• 反过来，如果header本身也创建了堆叠上下文，那你得确保目标元素的堆叠上下文层级比main和header的都高。

具体解决步骤：

• 给目标元素加上position: relative（或其他非static定位），再设置一个足够高的z-index（比如z-index: 999）。
• 如果main有自己的堆叠上下文，要么移除main的z-index（前提是不影响其他布局），要么把目标元素移到main标签的外部，这样它的堆叠上下文就不会被main限制了。

问题二：移动端侧边nav在首页正常显示在header上方，登录页却被form遮挡 #

这种场景下，首页和登录页的核心差异就是form的存在，问题大概率出在form（或它的父容器）的堆叠设置上：

• 登录页的form可能设置了position: relative/absolute+z-index，创建了比nav更高的堆叠层级，直接把nav压在了下面。
• 另一种可能是，登录页里包裹form的某个父容器（比如页面的主容器）设置了定位和z-index，导致nav的堆叠上下文被限制在更低的层级里。

可行的解决办法：

• 先检查form的CSS代码，看看有没有position和z-index属性，如果有，要么降低form的z-index值，要么给nav设置更高的z-index（同时确保nav有非static定位）。
• 确认nav的父元素有没有创建堆叠上下文，如果nav被包裹在某个带position+z-index的容器里，那nav的z-index只能相对于这个父容器生效——这时候要么把nav移到这个容器外面，要么调整父容器的z-index值。
• 额外提个容易踩的坑：如果用了position: fixed的nav，要确保它的父元素没有设置transform/perspective/filter这类属性，这些属性也会强制创建堆叠上下文，把fixed元素死死限制在父容器里，导致层级异常。

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