我有一个在HTML和CSS中实现的画廊，其中标题菜单隐藏在瓷砖后面。我已经尝试使用z-index属性来调整堆叠顺序，但它没有解决这个问题。此外，附加到“类别”菜单项的链接似乎不起作用，尽管路径是正确的，并且已经过验证。
代码如下：

document.addEventListener("DOMContentLoaded", function(event) {

  const gallery = document.getElementById("gallery");

  window.onmousemove = e => {
    const mouseX = e.clientX,
      mouseY = e.clientY;

    const xDecimal = mouseX / window.innerWidth,
      yDecimal = mouseY / window.innerHeight;

    const maxX = gallery.offsetWidth - window.innerWidth,
      maxY = gallery.offsetHeight - window.innerHeight;

    const panX = maxX * xDecimal * -1,
      panY = maxY * yDecimal * -1;

    gallery.animate({
      transform: `translate(${panX}px, ${panY}px)`
    }, {
      duration: 4000,
      fill: "forwards",
      easing: "ease"
    })
  }

});

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

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

.tile {
  border-radius: 1vmax;
  position: absolute;
  transition: transform 800ms ease;
  pointer-events: none;
  z-index: 1;
}

.tile:hover {
  transform: scale(1.1);
  pointer-events: auto;
}

.tile:hover>img {
  opacity: 1;
  transform: scale(1.01);
}

.tile>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 800ms ease, transform 800ms ease;
}

.tile:nth-child(1) {
  background-color: rgb(255, 238, 88);
  height: 14%;
  width: 20%;
  left: 5%;
  top: 5%;
}

.tile:nth-child(2) {
  background-color: rgb(66, 165, 245);
  height: 24%;
  width: 14%;
  left: 42%;
  top: 12%;
}

.tile:nth-child(3) {
  background-color: rgb(239, 83, 80);
  height: 18%;
  width: 16%;
  left: 12%;
  top: 34%;
}

.tile:nth-child(4) {
  background-color: rgb(102, 187, 106);
  height: 14%;
  width: 12%;
  left: 45%;
  top: 48%;
}

.tile:nth-child(5) {
  background-color: rgb(171, 71, 188);
  height: 16%;
  width: 32%;
  left: 8%;
  top: 70%;
}

.tile:nth-child(6) {
  background-color: rgb(255, 167, 38);
  height: 24%;
  width: 24%;
  left: 68%;
  top: 8%;
}

.tile:nth-child(7) {
  background-color: rgb(63, 81, 181);
  height: 16%;
  width: 20%;
  left: 50%;
  top: 74%;
}

.tile:nth-child(8) {
  background-color: rgb(141, 110, 99);
  height: 24%;
  width: 18%;
  left: 72%;
  top: 42%;
}

.tile:nth-child(9) {
  background-color: rgb(250, 250, 250);
  height: 10%;
  width: 8%;
  left: 84%;
  top: 84%;
}

a {
  text-decoration: none;
  color: white;
}

.menu-bar {
  display: flex;
  justify-content: flex-end;
  left: 70%;
  top: 5%;
  text-decoration: none;
  user-select: none;
  z-index: 999;
}

.menu-bar>.menu-item {
  font-size: medium;
  font-family: megrim;
  padding: 40px;
  text-decoration: none;
}

.menu-bar>.menu-item:hover {
  color: white;
  font-size: medium;
  font-family: megrim;
  font-weight: bold;
  padding: 40px;
  opacity: 0.8;
  transform: scale(1.2);
  transition: all ease-in-out 300ms;
}

a {
  text-decoration: none;
  color: white;
}

<header>
  <div class="menu-bar">
    <div class="menu-item"> <a href="#"> HOME </a></div>
    <div class="menu-item"> <a href="C:\\Users\\engar\\Desktop\\Web Merge\\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>

我希望您能就如何解决这两个问题提出见解或建议：

• 如何确保标题菜单显示在图库图块的顶部，而不是隐藏在它们后面？
• 为什么“类别”菜单项的链接不起作用，即使文件路径是正确的？

提前感谢您的帮助！