Tailwind CSS，React JS - 过渡和变换导致导航栏重叠

Question

总的来说，我是 Tailwind 样式和 CSS 样式的新手。 我正在使用 React 并为我的页面创建了一个标题（导航栏）以 fixed。它由两个组件组成，它们的代码如下所示：

import React from "react";
import { IoMdHelpCircleOutline } from "react-icons/io";
import { Link } from "react-router-dom";

function NavBar() {
  return (
    <div className="bg-white  w-full shadow-md ">
      <div className="z-40 w-full">
        <div className=" bg-white  border-b border-mgray">
          <nav className=" w-full h-auto ">
            <ul className="text-nav_inactive flex px-3 pt-3 pb-1.5 mx-auto">
              <li className="rounded-md transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 hover:bg-mid_blue hover:text-white hover:shadow-lg">
                <Link to="/wb" className="px-3 pb-1">
                  Google Resources
                </Link>
              </li>
              <li className="rounded-md transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 hover:bg-mid_blue hover:text-white hover:shadow-lg">
                <Link to="/tst" onClick="" className="px-3 pb-1">
                  Tst
                </Link>
              </li>
              <li className="rounded-md transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 hover:bg-mid_blue hover:text-white hover:shadow-lg">
                <Link to="/option" onClick="" className="px-3 pb-1">
                  Option
                </Link>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  );
}

function Head() {
  return (
    <div className="fixed w-screen bg-gradient-to-b from-l2_blue to-dark_blue">
      <div id="" className="px-8 py-4">
        <Link
          to="/"
          alt="BL Link"
          className="text-2xl text-white"
        >
          Homepage
        </Link>
        <span className="text-sm p-1 px-2 inline-flex text-gray transition duration-500 ease-in-out bg-blue-600 transform hover:-translate-y-1 hover:scale-110">
          <a
            href="https://www.google.com"
            target="_blank"
            rel="noreferrer"
          >
            <IoMdHelpCircleOutline />
          </a>
        </span>
      </div>
      <NavBar />
    </div>
  );
}

export default Head;

注意： Head() div 返回的 div 是固定的。

接下来，页面上是另一个组件。滚动页面时，某些图标等会呈现在导航栏上。它的代码如下：

function NextPart() {
  let match = useRouteMatch();
  console.log(match);
  return (
    <div className="px-3 pt-32 ">
      <div id="outer_div" className="bg-barc-white p-4 rounded shadow-lg">
        <div id="first_row" className="inline-flex pb- w-full">
          <div id="title_testUri" className="w-full inline-flex">
            <h2 className="text-3xl px-4 text-barc-dark_blue self-center">
              Sub
            </h2>
            <span className="text-xs text-barc-bgray self-center">
              A smaller part
              <a
                href="https://www.yahoo.com"
                target="_blank"
                rel="noreferrer"
                className="text-xs text-barc-nav_inactive inline-flex "
              >
                <span className="m-auto text-sm px-0.5 text-barc-mid_blue transition duration-500 ease-in-out bg-blue-600 transform hover:-translate-y-1 hover:scale-110">
                  <IoMdHelpCircleOutline />
                </span>
              </a>
            </span>
          </div>
        </div>
    </div>
</div>

下面的图片将描述这个问题：

1. 这是页面的正常固定视图，无需滚动。

---

1. 滚动时，导航栏上的某些按钮重叠，如下面的屏幕截图所示：

我尝试删除图标上的过渡和变换，发现问题已解决。我想实现这些变换和过渡，但不重叠。请帮帮我。

此外，如果需要有关该问题的任何其他详细信息，请随时发表评论，我将编辑帖子以包含相关详细信息。

谢谢！ :)

Answer 1

正如@JHeth 在上面的评论中提到的，将 z-index（特别是 z-10）添加到 Head() first(fixed) div 解决了我的问题。

谢谢@JHeth :)