我不確定這是css問題還是順風順水的問題，但是有人知道為什么懸停會覆蓋z-index優先級嗎？

我有一個navbar segement，它在我的應用程序中具有最高的z索引，但是當我嘗試一些懸停動畫時，它會將懸停的div帶到它的前面。

有什么想法嗎？

下面是被div覆蓋的navbar片段:

<div className="z-100 w-2/3 shadow-lg flex items-center justify-center p-4 ">
      <div className="w-full lg:max-w-[1200px] xl:max-w-[1500px] md:max-w-[900px] sm:max-w-[700px] flex items-center justify-between">
        {icons.map((icon) => (
          <label htmlFor="category-modal">
            <Image
              key={icon}
              className="cursor-pointer hover:bg-white rounded-full p-[5px]"
              height="40"
              width="40"
              alt={icon}
              src={`/images/${icon}.png`}
              onClick={() => dispatch(setCategory(icon))}
            />
          </label>
        ))}
      </div>
    </div>

我的懸浮動畫的css:

<div className="w-full lg:max-w-[1200px] xl:max-w-[1500px] md:max-w-[900px] sm:max-w-[700px] h-full flex items-center justify-center px-auto">
  <div
    className="
  grid md:grid-cols-3 sm:grid-cols-2 lg:grid-cols-4 gap-10 w-full h-full
  "
  >
    <div
      className="flex flex-row items-center justify-center overflow-hidden h-[300px] w-[250px] rounded-md"
      key={displate.id}
    >
      <label htmlFor="my-modal">
        <Image
          height={300}
          width={250}
          className="rounded-md cursor-pointer -z-50 hover:scale-125 duration-300 transition"
          alt={displate.title || ""}
          src={`/images/${displate.category}/${displate.img}.jpg`}
          style={{ objectFit: "cover" }}
          onClick={() => dispatch(setCurrentDisplate(displate))}
        />
      </label>
    </div>
  </div>
</div>