WordPress移动端导航如何显示在粘性内容上方？

核心问题分析 #

你之前的CSS调整没生效，主要有两个关键错误：

1. 选择器错误：HTML里不存在<navigation>标签，正确的导航标签是<nav>，所以你写的navigation.nav-primary--mobile根本匹配不到目标元素，所有样式都没作用到菜单上。
2. 无效CSS属性：height: fit是非法值，正确写法是height: fit-content。

修复步骤 #

1. 修正选择器并调整层级规则
   替换你原来的CSS为以下代码，确保菜单能被正确选中并设置足够高的层级：

   .body-primary--home {
     position: sticky;
     z-index: 1;
     border: none;
     height: fit-content;
     margin: 0;
   }
   
   /* 直接用类选择器匹配，或根据实际HTML结构用nav.nav-primary--mobile */
   .nav-primary--mobile {
     position: fixed; /* 如果你的头部是fixed定位，此处也可改用absolute */
     z-index: 999; /* 数值远大于主体的z-index:1，确保层级最高 */
     top: 0; /* 固定到页面顶部，与头部位置对齐 */
     left: 0;
     right: 0;
     height: fit-content;
     margin: 0;
   }
   

2. 检查父容器限制
   打开浏览器开发者工具（F12），选中菜单的父元素，确认：
   • 父元素没有设置overflow: hidden，否则菜单展开后会被裁剪
   • 父元素的z-index没有低于1，避免限制菜单的层级提升
3. 实时验证调整
   在开发者工具的样式面板里，实时修改菜单的z-index数值，观察是否能正常显示在主体上方，快速确认层级设置是否生效。

额外说明 #

• 你原来设置的主体sticky、滚动覆盖头部的功能可以完全保留，只要菜单的z-index高于主体，且脱离了可能限制它层级的父容器，就能正常显示在最上层。
• 如果改用position: absolute，需要确保菜单的直接父容器是position: relative/fixed定位，否则会相对于整个页面定位。

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