移动端垂直导航被页面元素遮挡的问题排查与解决求助

嘿，我看你遇到了移动端展开导航后被h1、文章图片遮挡的麻烦，这个其实是**堆叠层级（z-index）**的问题——你的导航栏层级比页面内容低，所以展开的菜单就被压在下面了。别担心，几步就能搞定：

具体修复方案： #

1. 给主导航栏设置层级 #

找到你的#nav-primary CSS规则，添加position: relative和足够高的z-index。因为z-index只对非static定位的元素生效，所以必须先设置定位：

#nav-primary { 
  background-color: #007DBD; 
  height: 45px;
  position: relative; /* 开启定位，让z-index生效 */
  z-index: 1000; /* 确保导航栏在页面内容之上 */
}

2. 给移动端展开的菜单补充层级（可选但更稳妥） #

在移动端媒体查询里，给展开的菜单容器#navbar-1也加上层级，确保菜单本身不会被其他元素干扰：

@media only screen and (max-width: 720px) {
  #nav-primary a.navbar-brand, #nav-primary button.navbar-toggler { padding-top: 0; }
  #navbar-1 { 
    background-color: #007DBD; 
    margin-top: 5px; 
    border-radius: 3px;
    position: relative;
    z-index: 1001; /* 比父导航栏高一点，确保菜单层级最高 */
  }
  /* 其他原有样式保持不变 */
}

原理说明： #

页面元素默认的堆叠顺序是按照HTML的书写顺序，后面的元素会覆盖前面的。通过设置z-index，我们可以手动调整元素的堆叠优先级——数值越高，元素越靠上。加上position: relative是因为z-index对默认的static定位元素不起作用。

修改完之后，你再点击移动端的汉堡按钮，展开的导航菜单就会稳稳地显示在所有页面内容的上方，再也不会被遮挡啦～

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