移动端导航栏被背景图片覆盖无法正常显示问题求助

1. HTML结构错误：你混淆了<head>和<header>标签，将页面元数据（link、title）和导航内容都放在了错误的<header>标签中，且放在了<body>标签外部，同时缺少移动端适配必需的viewport元标签，会导致页面渲染异常。
2. 层级优先级问题：移动端导航菜单.nav-menu使用fixed定位，背景图容器.big-image使用relative定位，二者都是定位元素，浏览器默认按DOM书写顺序判定层级，写在后方的背景图容器层级高于导航，导致导航被遮盖。

第一步：修正HTML结构 #

将原HTML开头部分修改为如下结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="stylesheet" href="style.css">
    <title>Genius High School</title>
</head>
<body>
<header class="header">
    <nav class="navbar">
      <!-- 原有导航内容保持不变 -->
      <ul class="nav-menu">
          <li class="nav-item">
              <a href="index.html" class="nav-link">Home</a>
          </li>
          <!-- 其余li项保持不变 -->
      </ul>
      <div class="hamburger">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
      </div>
  </nav>
</header>
<!-- 原有body内其余内容保持不变 -->

第二步：调整导航层级 #

在CSS中给.header新增如下属性，保证导航层级高于所有页面内容：

.header{
  border-bottom: 1px solid #E2E8F0;
  position: relative;
  z-index: 999;
  background-color: #ffffff;
}

也可以直接在移动端媒体查询的.nav-menu规则中新增z-index: 999，效果一致。

修改完成后刷新页面即可看到移动端导航展开后正常显示在背景图上方。

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