HTML/CSS画廊导航菜单层级与链接跳转问题求助

一、导航菜单被画廊Tile遮挡的解决方法 #

z-index仅对定位元素生效，你的.menu-bar未设置定位属性，导致z-index:999不生效，而画廊容器#gallery是position:absolute，默认堆叠在未定位元素上方。

修复步骤： #

1. 给header添加定位属性，让z-index生效
2. 确保菜单的z-index数值大于画廊及Tile的层级（Tile的z-index为1，设999足够）

修改后的CSS代码片段：

header {
  position: relative; /* 添加定位 */
  z-index: 999; /* 确保层级高于画廊 */
}

二、Categories链接无法跳转的原因及解决方法 #

你使用了本地绝对路径C:\\Users\\engar\\Desktop\\Web Merge\\Category\\categories.html，浏览器出于安全限制，不允许直接通过网页访问本地文件系统的盘符路径。

修复步骤： #

1. 使用相对路径：若categories.html与当前页面在同一项目结构中，路径改为相对形式，比如：

<a href="./Category/categories.html"> Categories </a>

（.//代表当前目录，也可直接写Category/categories.html）
2. 确认文件路径大小写与实际文件一致（Windows系统不区分，但部分服务器环境会区分）
3. 确保categories.html确实存在于对应文件夹中

修改后的完整代码参考 #

HTML代码

<header>
  <div class="menu-bar">
    <div class="menu-item"> <a href="#"> HOME </a></div>
    <div class="menu-item"> <a href="./Category/categories.html"> Categories </a></div>
    <div class="menu-item"> <a href="###"> Contact </a></div>
  </div>
</header>
<div id="gallery">
  <a href="#" class="tile">
    <img src="pictures/6.jpg" />
  </a>
  <a href="#" class="tile">
    <img src="pictures/10.jpg" />
  </a>
  <a href="#" class="tile">
    <img src="pictures/21.jpg" />
  </a>
  <a href="#" class="tile">
    <img src="pictures/22.jpg" />
  </a>
  <a href="#" class="tile">
    <img src="pictures/23.jpg" />
  </a>
  <a href="#" class="tile">
    <img src="pictures/28.jpg" />
  </a>
  <a href="#" class="tile">
    <img src="pictures/34.jpg" />
  </a>
  <a href="#" class="tile">
    <img src="pictures/35.jpg" />
  </a>
  <a href="#" class="tile">
    <img src="pictures/84.jpg" />
  </a>
</div>

CSS代码（仅修改相关部分）

body {
  background-color: rgb(10, 10, 10);
  height: 100vh;
  margin: 0px;
  overflow: hidden;
}

header {
  position: relative;
  z-index: 999;
}

#gallery {
  height: 140vmax;
  width: 140vmax;
  position: absolute;
}

/* 其余CSS代码保持不变 */

内容的提问来源于stack exchange，提问作者Elton Grivith D Souza